first commit

assets/js/pages/addresses/form.js

@@ -0,0 +1,6 @@
+window.addEventListener('load', function() {
+  var $countryField = $($('.form-control.select2')[0]);
+  if ($countryField && $countryField.hasClass('is-invalid')) {
+    $('.select2-container').addClass('has-error');
+  }
+});

assets/js/pages/addresses/list.js

@@ -0,0 +1,139 @@
+window.addEventListener('load', function () {
+    $('#searchForm').on('submit', function (e) {
+        const searchKeyword = $("#searchText").val();
+        const selectedCountry = $("#countryFilter").val();
+
+        if (!searchKeyword) {
+            $('#searchText').attr('disabled', 'disabled');
+        }
+        if (!selectedCountry) {
+            $('#countryFilter').attr('disabled', 'disabled');
+        }
+
+        return true;
+    });
+
+    $('.btn-remove').on('click', function (e) {
+        e.preventDefault();
+
+        const itemId = $(this).data('id');
+        const address = $(this).data('address');
+
+        $modal = $('#remove-address-warning-modal');
+        $modal.find('h4.modal-title').text(`Removing address: ${address}`);
+        $modal.find('#removeBtn').data('id', itemId);
+    });
+
+    $('#removeBtn').on('click', function (e) {
+        e.preventDefault();
+        const itemId = $(this).data('id');
+        window.location.href = `/addresses/${itemId}/remove`;
+    })
+
+    const address = $("#address").select2({
+        placeholder: "Search By Address",
+        width: "resolve",
+        maximumSelectionSize: 1,
+        minimumInputLength: 3,
+        ajax: {
+            url: "/geofence_area_anchor/getLocationByAddress",
+            type: "GET",
+            dataType: "json",
+            delay: 250,
+            data: function (params) {
+                const query = {
+                    address: params.term,
+                    page: params.page || 1
+                };
+                return query;
+            },
+            processResults: function (res, params) {
+                const { data, total } = res;
+                params.page = params.page || 1;
+                return {
+                    results: data.map(item => ({
+                        id: item.id,
+                        text: item.address
+                    })),
+                    pagination: {
+                        more: params.page * 20 < +total
+                    }
+                };
+            }
+        }
+    });
+
+    const city = $("#city").select2({
+        placeholder: "Search By City",
+        maximumSelectionSize: 1,
+        minimumInputLength: 3,
+        ajax: {
+            url: "/geofence_area_city/getCities",
+            type: "GET",
+            dataType: "json",
+            delay: 250,
+            data: function (params) {
+                const query = {
+                    search_text: params.term,
+                    page: params.page || 1
+                };
+                return query;
+            },
+            processResults: function (res, params) {
+                const { data, total } = res;
+                params.page = params.page || 1;
+                return {
+                    results: data.map(item => ({
+                        id: item.id,
+                        text: item.city_name
+                    })),
+                    pagination: {
+                        more: params.page * 20 < +total
+                    }
+                };
+            }
+        }
+    });
+
+    $("#searchForm").on("submit", function(e) {
+
+        let city_id = '';
+        let city_name = '';
+
+        if (city.select2("data").length) {
+            city_id = city.select2("data")[0].id;
+            city_name = city.select2("data")[0].text;
+        }
+
+        const address_text = address.select2("data").length
+            ? address.select2("data")[0].text
+            : '';
+        
+        const hidden_field =
+            `<input type="hidden" name="city_id" value="${city_id}" />
+            <input type="hidden" name="city_name" value="${city_name}" />
+            <input type="hidden" name="address" value="${address_text}" />`;
+
+        $(this).append(hidden_field);
+    });
+
+    $('#btnClear').on('click', function() {
+        $('#city').empty();
+        $('#address').empty();
+        if ($('#radius_default').prop('checked') === false) {
+            $('#rad').val('');
+        }
+        $('#lng').val('');
+        $('#lat').val('');
+    })
+
+    $('#radius_default').on('change', function() {
+        if ($(this).prop('checked')) {
+            $('#rad').val('5'); // default 5000m
+            $('#rad').css('pointer-events', 'none');
+        } else {
+            $('#rad').css('pointer-events', 'auto');
+        }
+    })
+    $('#radius_default').trigger('change');
+});

assets/js/pages/alpaca_advanced.js

@@ -0,0 +1,379 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Alpaca - Basic inputs
+*
+*  Specific JS code additions for alpaca_advanced.html page
+*
+*  Version: 1.0
+*  Latest update: Mar 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+
+    // Option trees
+    // ------------------------------
+
+    // Option tree field
+    $("#alpaca-option-tree").alpaca({
+        "schema": {
+            "type": "number",
+            "title": "What number would like for your sports jersey?"
+        },
+        "options": {
+            "type": "optiontree",
+            "tree": {
+                "selectors": {
+                    "sport": {
+                        "schema": {
+                            "type": "string"
+                        },
+                        "options": {
+                            "type": "select",
+                            "noneLabel": "Pick a Sport..."
+                        }
+                    },
+                    "team": {
+                        "schema": {
+                            "type": "string"
+                        },
+                        "options": {
+                            "type": "select",
+                            "noneLabel": "Pick a Team..."
+                        }
+                    },
+                    "player": {
+                        "schema": {
+                            "type": "string"
+                        },
+                        "options": {
+                            "type": "select",
+                            "noneLabel": "Pick a Player..."
+                        }
+                    }
+                },
+                "order": ["sport", "team", "player"],
+                "data": [{
+                    "value": 23,
+                    "attributes": {
+                        "sport": "Basketball",
+                        "team": "Chicago Bulls",
+                        "player": "Michael Jordan"
+                    }
+                }, {
+                    "value": 33,
+                    "attributes": {
+                        "sport": "Basketball",
+                        "team": "Chicago Bulls",
+                        "player": "Scotty Pippen"
+                    }
+                }, {
+                    "value": 4,
+                    "attributes": {
+                        "sport": "Football",
+                        "team": "Green Bay Packers",
+                        "player": "Brett Favre"
+                    }
+                }, {
+                    "value": 19,
+                    "attributes": {
+                        "sport": "Baseball",
+                        "team": "Milwaukee Brewers",
+                        "player": "Robin Yount"
+                    }
+                }, {
+                    "value": 99,
+                    "attributes": {
+                        "sport": "Hockey",
+                        "player": "Wayne Gretzky"
+                    }
+                }],
+                "horizontal": true
+            },
+            "focus": false
+        }
+    });
+
+
+    // Using connector
+    $("#alpaca-option-tree-connector").alpaca({
+        "schemaSource": "../default/assets/demo_data/alpaca/optiontree-custom-schema.json",
+        "optionsSource": "../default/assets/demo_data/alpaca/optiontree-custom-options.json",
+        "options": {
+            "focus": false
+        }
+    });
+
+
+
+    // Input types
+    // ------------------------------
+
+    // Lowercase
+    $("#alpaca-lowercase").alpaca({
+        "data": "Ice cream is wonderful.",
+        "schema": {
+            "format": "lowercase"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // Uppercase
+    $("#alpaca-uppercase").alpaca({
+        "data": "Ice cream is wonderful.",
+        "schema": {
+            "format": "uppercase"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // Search type
+    $("#alpaca-search").alpaca({
+        "data": "Where for art thou Romeo?",
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "type": "search",
+            "focus": false,
+            "label": "Search"
+        }
+    });
+
+
+    // Integer type
+    $("#alpaca-integer").alpaca({
+        "data": 20,
+        "options": {
+            "type": "integer",
+            "label": "Age:",
+            "focus": false
+        },
+        "schema": {
+            "minimum": 18,
+            "maximum": 25,
+            "exclusiveMinimum": true,
+            "exclusiveMaximum": true,
+            "divisibleBy": 2
+        }
+    });
+
+
+    // Password type
+    $("#alpaca-password").alpaca({
+        "data": "password",
+        "schema": {
+            "format": "password"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // Email type
+    $("#alpaca-email").alpaca({
+        "data": "support",
+        "schema": {
+            "format": "email"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // IP address type
+    $("#alpaca-ipv4").alpaca({
+        "data": "100.60",
+        "schema": {
+            "format": "ip-address"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // URL type
+    $("#alpaca-url").alpaca({
+        "data": "http://www.alpacajs.org",
+        "options": {
+            "type": "url",
+            "focus": false
+        },
+        "schema": {
+            "format": "uri"
+        }
+    });
+
+
+    // Currency type
+    $("#alpaca-currency").alpaca({
+        "options": {
+            "type": "currency",
+            "focus": false
+        }
+    });
+
+
+    // Personal name type
+    $("#alpaca-name").alpaca({
+        "data": "Oscar Zoroaster Phadrig Isaac Norman Henkel Emmannuel Ambroise Diggs",
+        "options": {
+            "type": "personalname",
+            "focus": false
+        }
+    });
+
+
+
+    // File inputs
+    // ------------------------------
+
+    // Basic file input
+    $("#alpaca-file").alpaca({
+        "data": "",
+        "options": {
+            "type": "file",
+            "label": "Ice Cream Photo:",
+            "helper": "Pick your favorite ice cream picture.",
+            "focus": false
+        },
+        "schema": {
+            "type": "string",
+            "format": "uri"
+        }
+    });
+
+
+    // Static mode
+    $("#alpaca-file-static").alpaca({
+        "data": "/abc.html",
+        "options": {
+            "type": "file",
+            "label": "Ice Cream Photo:",
+            "helper": "Pick your favorite ice cream picture.",
+            "focus": false
+        },
+        "schema": {
+            "type": "string",
+            "format": "uri"
+        },
+        "view": "bootstrap-display"
+    });
+
+
+    // Styled file input
+    $("#alpaca-file-styled").alpaca({
+        "data": "",
+        "options": {
+            "type": "file",
+            "label": "Ice Cream Photo:",
+            "helper": "Pick your favorite ice cream picture.",
+            "id": "file-styled",
+            "focus": false
+        },
+        "schema": {
+            "type": "string",
+            "format": "uri"
+        },
+        "postRender": function(control) {
+            $("#file-styled").uniform({
+                fileButtonClass: 'action btn bg-blue'
+            });
+        }
+    });
+
+
+    // Disabled file input
+    $("#alpaca-file-disabled").alpaca({
+        "data": "",
+        "options": {
+            "type": "file",
+            "label": "Ice Cream Photo:",
+            "helper": "Pick your favorite ice cream picture.",
+            "disabled": true,
+            "id": "file-styled-disabled",
+            "focus": false
+        },
+        "schema": {
+            "type": "string",
+            "format": "uri"
+        },
+        "postRender": function(control) {
+            $("#file-styled-disabled").uniform({
+                fileButtonClass: 'action btn bg-blue'
+            });
+        }
+    });
+
+
+
+    // Selector helpers
+    // ------------------------------
+
+    // Country selector
+    $("#alpaca-country").alpaca({
+        "options": {
+            "type": "country",
+            "focus": false
+        }
+    });
+
+
+    // Searchable country selector
+    $("#alpaca-country-search").alpaca({
+        "options": {
+            "type": "country",
+            "id": "country-search",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $('#country-search').select2();
+        }
+    });
+
+
+    // State selector
+    $("#alpaca-state").alpaca({
+        "options": {
+            "type": "state",
+            "focus": false
+        }
+    });
+
+    // Searchable state selector
+    $("#alpaca-state-search").alpaca({
+        "options": {
+            "type": "state",
+            "id": "state-search",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $('#state-search').select2();
+        }
+    });
+
+
+
+    // CKEditor
+    // ------------------------------
+
+    // Full featured CKEditor
+    $("#alpaca-ckeditor-full").alpaca({
+        "data": "Ice cream is a <b>frozen</b> dessert usually made from <i>dairy products</i>, such as milk and cream, and often combined with fruits or other ingredients and flavors.",
+        "options": {
+            "type": "ckeditor"
+        }
+    });
+
+});

assets/js/pages/alpaca_basic.js

@@ -0,0 +1,355 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Alpaca - Basic inputs
+*
+*  Specific JS code additions for alpaca_basic.html page
+*
+*  Version: 1.0
+*  Latest update: Mar 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Text input
+    // ------------------------------
+
+    // Basic example
+    $("#alpaca-basic").alpaca({
+        "data": "I Love Alpaca Ice Cream!",
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // Display only view
+    $("#alpaca-static").alpaca({
+        "data": "I Love Alpaca Ice Cream!",
+        "schema": {
+            "type": "string"
+        },
+        "view": "bootstrap-display"
+    });
+
+
+    // Input field label
+    $("#alpaca-input-label").alpaca({
+        "data": "I Love Alpaca Ice Cream!",
+        "options": {
+            "label": "Input label",
+            "focus": false
+        }
+    });
+
+
+    // Static input label
+    $("#alpaca-static-label").alpaca({
+        "data": "I Love Alpaca Ice Cream!",
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "label": "Input label"
+        },
+        "view": "bootstrap-display"
+    });
+
+
+    // Validation
+    $("#alpaca-validation").alpaca({
+        "data": "Mint",
+        "schema": {
+            "minLength": 3,
+            "maxLength": 5
+        },
+        "options": {
+            "label": "Ice Cream",
+            "helper": "Your favorite ice cream?",
+            "size": 30,
+            "focus": false
+        }
+    });
+
+
+    // Validation with predefined value
+    $("#alpaca-validation-predefined").alpaca({
+        "data": "Mint Chocolate",
+        "schema": {
+            "minLength": 3,
+            "maxLength": 5
+        },
+        "options": {
+            "label": "Ice Cream",
+            "helper": "Please tell us the kind of ice cream you love most!",
+            "size": 30,
+            "focus": false,
+            "placeholder": "Enter an ice cream flavor"
+        }
+    });
+
+
+    // Disallow empty spaces
+    $("#alpaca-disallow-empty").alpaca({
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "type": "lowercase",
+            "label": "User Name",
+            "disallowEmptySpaces": true,
+            "helper": "Type something with empty space",
+            "focus": false
+        }
+    });
+
+
+    // Disallow values
+    $("#alpaca-disallow-values").alpaca({
+        "data": "Mickey Mantle",
+        "schema": {
+            "type": "string",
+            "disallow": ["Mickey Mantle", "Mickey"]
+        },
+        "options": {
+            "label": "Name",
+            "focus": false
+        }
+    });
+
+
+    // Typeahead integration
+    $("#alpaca-typeahead").alpaca({
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "type": "text",
+            "label": "Company Name",
+            "helper": "Select the name of a computing company",
+            "placeholder": "Enter 'a'",
+            "focus": false,
+            "typeahead": {
+                "config": {
+                    "autoselect": true,
+                    "highlight": true,
+                    "hint": true,
+                    "minLength": 1
+                },
+                "datasets": {
+                    "type": "local",
+                    "source": function(query) {
+                        var companies = ["Google", "Amazon", "Microsoft", "Apple", "Spotify", "Alpaca", "Another company", "Facebook"];
+                        var results = [];
+                        for (var i = 0; i < companies.length; i++) {
+                            var add = true;
+                            if (query) {
+                                add = (companies[i].indexOf(query) === 0);
+                            }
+                            if (add) {
+                                results.push({
+                                    "value": companies[i]
+                                });
+                            }
+                        }
+                        return results;
+                    }
+                }
+            }
+        }
+    });
+
+
+    // Maxlength integration
+    $("#alpaca-maxlength").alpaca({
+        "schema": {
+            "type": "string",
+            "minLength": 3,
+            "maxLength": 25
+        },
+        "options": {
+            "type": "text",
+            "label": "What is your name?",
+            "constrainMaxLength": true,
+            "constrainMinLength": true,
+            "showMaxLengthIndicator": true,
+            "focus": false
+        },
+        "data": "Jackie Robinson"
+    });
+
+
+
+    // Textareas
+    // ------------------------------
+
+    // Basic textarea
+    $("#alpaca-textarea").alpaca({
+        "data": "Ice cream or ice-cream is a frozen dessert usually made from dairy products, such as milk and cream, and often combined with fruits or other ingredients and flavours.",
+        "options": {
+            "type": "textarea",
+            "label": "Receipt",
+            "helper": "Receipt for Best Homemade Ice Cream",
+            "rows": 4,
+            "cols": 80,
+            "focus": false
+        }
+    });
+
+
+    // With placeholder
+    $("#alpaca-textarea-placeholder").alpaca({
+        "options": {
+            "type": "textarea",
+            "label": "Receipt",
+            "helper": "Receipt for Best Homemade Ice Cream",
+            "placeholder": "Enter your favorite ice cream here...",
+            "rows": 4,
+            "cols": 80,
+            "focus": false
+        }
+    });
+
+
+    // Display mode
+    $("#alpaca-textarea-static").alpaca({
+        "data": "Ice cream or ice-cream is a frozen dessert usually made from dairy products, such as milk and cream, and often combined with fruits or other ingredients and flavours.",
+        "options": {
+            "type": "textarea",
+            "label": "Receipt",
+            "rows": 6,
+            "cols": 80,
+            "focus": false
+        },
+        "view": "bootstrap-display"
+    });
+
+
+    // Single field render
+    $("#alpaca-textarea-override").alpaca({
+        "data": "My name is Dr. Jacobian and I am a neuroscientist from the Cornell University.  I've perfected a DNA transcription process which makes it possible for the first time to use DNA nucleotides to store pedabytes of information in real-time.",
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "type": "textarea",
+            "label": "Tell us about yourself",
+            "view": "bootstrap-display"
+        }
+    });
+
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select
+    $("#alpaca-select").alpaca({
+        "data": "coffee",
+        "schema": {
+            "enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
+        },
+        "options": {
+            "label": "Ice cream",
+            "helper": "What flavor of ice cream do you prefer?",
+            "focus": false
+        }
+    });
+
+
+    // External data source
+    $("#alpaca-select-external").alpaca({
+        "options": {
+            "label": "Ice cream",
+            "helper": "Guess my favorite ice cream?",
+            "type": "select",
+            "focus": false,
+            "dataSource": "../default/assets/demo_data/alpaca/selects.json"
+        }
+    });
+
+
+    // Select2 select
+    $("#alpaca-select2").alpaca({
+        "data": "coffee",
+        "schema": {
+            "enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
+        },
+        "options": {
+            "label": "Ice cream",
+            "helper": "What flavor of ice cream do you prefer?",
+            "id": "select2-basic",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $('#select2-basic').select2({
+                minimumResultsForSearch: Infinity
+            });
+        }
+    });
+
+
+    // Select2 select with search
+    $("#alpaca-select2-search").alpaca({
+        "data": "coffee",
+        "schema": {
+            "enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
+        },
+        "options": {
+            "label": "Ice cream",
+            "helper": "What flavor of ice cream do you prefer?",
+            "id": "select2-search",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $('#select2-search').select2();
+        }
+    });
+
+
+    // Multiselect
+    $("#alpaca-multiselect").alpaca({
+        "data": ["Vanilla", "Chocolate"],
+        "schema": {
+            "type": "array",
+            "items": {
+                "title": "Ice Cream",
+                "type": "string",
+                "enum": ["Vanilla", "Chocolate", "Strawberry", "Mint"],
+                "minItems": 2,
+                "maxItems": 3
+            }
+        },
+        "options": {
+            "label": "Ice cream",
+            "helper": "Guess my favorite ice cream?",
+            "type": "select",
+            "size": 5,
+            "id": "multiselect",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $("#multiselect").parent().find("input[type=checkbox]").uniform();
+        }
+    });
+
+
+    // Multiselect with remote data
+    $("#alpaca-multiselect-remote").alpaca({
+        "options": {
+            "label": "Select your favorite flavor of ice cream",
+            "type": "select",
+            "multiple": true,
+            "helper": "Guess my favorite ice cream?",
+            "size": 3,
+            "focus": false,
+            "id": "multiselect-remote",
+            "dataSource": "../default/assets/demo_data/alpaca/selects.json"
+        },
+        "postRender": function(control) {
+            $("#multiselect-remote").parent().find("input[type=checkbox]").uniform();
+        }
+    });
+
+});

assets/js/pages/alpaca_controls.js

@@ -0,0 +1,304 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Alpaca - Basic inputs
+*
+*  Specific JS code additions for alpaca_controls.html page
+*
+*  Version: 1.0
+*  Latest update: Mar 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Checkboxes
+    // ------------------------------
+
+    // Checkbox with label
+    $("#alpaca-checkbox-label").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?"
+        }
+    });
+
+
+    // Display only mode
+    $("#alpaca-checkbox-static").alpaca({
+        "data": false,
+        "view": "bootstrap-display",
+        "options": {
+            "label": "Registered?"
+        }
+    });
+
+
+    // Styled checkbox
+    $("#alpaca-checkbox-styled").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?",
+            "fieldClass": "checkbox-styled"
+        },
+        "postRender": function(control) {
+            $('.checkbox-styled').find('input[type=checkbox]').uniform();
+        }
+    });
+
+
+    // Disabled checkbox
+    $("#alpaca-checkbox-styled-disabled").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?",
+            "fieldClass": "checkbox-styled-disabled",
+            "disabled": true
+        },
+        "postRender": function(control) {
+            $('.checkbox-styled-disabled').find('input[type=checkbox]').uniform();
+        }
+    });
+
+
+    // Switchery toggle
+    $("#alpaca-switchery").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?",
+            "fieldClass": "switchery-demo"
+        },
+        "postRender": function(control) {
+
+            // Init Switchery
+            var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-demo input[type=checkbox]'));
+            elems.forEach(function(html) {
+              var switchery = new Switchery(html);
+            });
+
+            // Add proper spacing
+            $('.switchery-demo').find('.checkbox').addClass('checkbox-switchery');
+        }
+    });
+
+
+    // Switchery toggle
+    $("#alpaca-switchery-disabled").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?",
+            "fieldClass": "switchery-disabled-demo",
+            "disabled": true
+        },
+        "postRender": function(control) {
+
+            // Init Switchery
+            var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-disabled-demo input[type=checkbox]'));
+            elems.forEach(function(html) {
+              var switchery = new Switchery(html);
+            });
+
+            // Add proper spacing
+            $('.switchery-disabled-demo').find('.checkbox').addClass('checkbox-switchery');
+        }
+    });
+
+
+    // Basic checkbox list
+    $("#alpaca-checkbox-list").alpaca({
+        "data": ["sandwich", "cookie", "drink"],
+        "schema": {
+            "type": "array",
+            "enum": ["sandwich", "chips", "cookie", "drink"]
+        },
+        "options": {
+            "type": "checkbox",
+            "label": "What would you like with your order?",
+            "optionLabels": ["A Sandwich", "Potato Chips", "A Cookie", "Soft Drink"]
+        }
+    });
+
+
+    // Styled checkbox list
+    $("#alpaca-checkbox-list-styled").alpaca({
+        "data": ["sandwich", "cookie", "drink"],
+        "schema": {
+            "type": "array",
+            "enum": ["sandwich", "chips", "cookie", "drink"]
+        },
+        "options": {
+            "type": "checkbox",
+            "label": "What would you like with your order?",
+            "optionLabels": ["A Sandwich", "Potato Chips", "A Cookie", "Soft Drink"],
+            "fieldClass": "checkbox-styled-list"
+        },
+        "postRender": function(control) {
+            $('.checkbox-styled-list').find('input[type=checkbox]').uniform();
+        }
+    });
+
+
+
+    // Radios
+    // ------------------------------
+
+    // Basic radios
+    $("#alpaca-radio-basic").alpaca({
+        "data": "green",
+        "options": {
+            "type": "radio",
+            "label": "Favorite Color",
+            "helper": "Pick your favorite color",
+            "optionLabels": {
+                "red": "Red",
+                "green": "Green",
+                "blue": "Blue",
+                "white": "White",
+                "black": "Black"
+            }
+        },
+        "schema": {
+            "required": true,
+            "enum": ["red", "green", "blue", "white", "black"]
+        }
+    });
+
+
+    // Disabled mode
+    $("#alpaca-radio-basic-disabled").alpaca({
+        "data": "Jimi Hendrix",
+        "schema": {
+            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
+        },
+        "options": {
+            "type": "radio",
+            "label": "Who is your favorite guitarist?",
+            "vertical": true,
+            "disabled": true
+        }
+    });
+
+
+    // Styled radios
+    $("#alpaca-radio-styled").alpaca({
+        "data": "Jimi Hendrix",
+        "schema": {
+            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
+        },
+        "options": {
+            "type": "radio",
+            "label": "Who is your favorite guitarist?",
+            "fieldClass": "radio-styled-demo",
+            "vertical": true
+        },
+        "postRender": function(control) {
+            $('.radio-styled-demo').find('input[type=radio]').uniform({
+                radioClass: 'choice'
+            });
+        }
+    });
+
+
+    // Disabled mode
+    $("#alpaca-radio-styled-disabled").alpaca({
+        "data": "Jimi Hendrix",
+        "schema": {
+            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
+        },
+        "options": {
+            "type": "radio",
+            "label": "Who is your favorite guitarist?",
+            "vertical": true,
+            "fieldClass": "radio-styled-disabled-demo",
+            "disabled": true
+        },
+        "postRender": function(control) {
+            $('.radio-styled-disabled-demo').find('input[type=radio]').uniform({
+                radioClass: 'choice'
+            });
+        }
+    });
+
+
+    // Required radios
+    $("#alpaca-radio-required").alpaca({
+        "data": "Coffee2",
+        "options": {
+            "label": "Ice cream",
+            "helper": "Guess my favorite ice cream?",
+            "optionLabels": ["Vanilla Flavor", "Chocolate Flavor", "Coffee Flavor"]
+        },
+        "schema": {
+            "required": true,
+            "enum": ["Vanilla", "Chocolate", "Coffee"]
+        }
+    });
+
+
+    // Options
+    $("#alpaca-radio-options").alpaca({
+        "data": "Jimi Hendrix",
+        "schema": {
+            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
+        },
+        "options": {
+            "type": "radio",
+            "label": "Who is your favorite guitarist?",
+            "removeDefaultNone": true,
+            "vertical": true
+        }
+    });
+
+
+
+    // Tokenfield
+    // ------------------------------
+
+    // Basic setup
+    $("#alpaca-tokenfield").alpaca({
+        "schema": {
+            "title": "Character Names",
+            "type": "string"
+        },
+        "options": {
+            "type": "token",
+            "focus": false,
+            "tokenfield": {
+                "autocomplete": {
+                    "source": ["marty", "doc", "george", "biff", "lorraine", "mr. strickland"],
+                    "delay": 100
+                },
+                "showAutocompleteOnFocus": true
+            }
+        },
+        "data": "marty,doc,george,biff"
+    });
+
+
+    // Display only mode
+    $("#alpaca-tokenfield-static").alpaca({
+        "schema": {
+            "title": "Character Names",
+            "type": "string"
+        },
+        "options": {
+            "type": "token",
+            "focus": false,
+            "tokenfield": {
+                "autocomplete": {
+                    "source": ["marty", "doc", "george", "biff", "lorraine", "mr. strickland"],
+                    "delay": 100
+                },
+                "showAutocompleteOnFocus": true
+            }
+        },
+        "data": "marty,doc,george,biff",
+        "view": "bootstrap-display"
+    });
+
+});

assets/js/pages/android_automation_job_detail/list.js

@@ -0,0 +1,64 @@
+window.addEventListener('load', function() {
+  $('#searchForm').on('submit', function(e) {
+    const searchKeyword = $("#searchText").val();
+
+    if (!searchKeyword) {
+      $('#searchText').attr('disabled', 'disabled');
+    }
+
+    return true;
+  });
+
+  $('.btn-remove').on('click', function(e) {
+    e.preventDefault();
+
+    const itemId = $(this).data('id');
+    const transport_provider = $(this).data('android-automation-job-detail');
+
+    $modal = $('#remove-android-automation-job-detail-warning-modal');
+    $modal.find('h4.modal-title').text(`Removing name: ${transport_provider}`);
+    $modal.find('#removeBtn').data('id', itemId);
+  });
+
+  $('#removeBtn').on('click', function(e) {
+    e.preventDefault();
+    const itemId = $(this).data('id');
+    window.__api__.remove(`/android_automation_job_details/remove/${itemId}`, itemId);
+  })
+
+  $("#quote_date").datepicker({
+    format: "yyyy-mm-dd",
+    autoclose: true
+  });
+
+  $(document).on('change', '#filter_transport_provider', function(e) {
+    get_android_automation_jobs_by_transport_provider(e.target.value);
+  });
+
+  function get_android_automation_jobs_by_transport_provider(transport_provider_id) {
+    
+    $('#btnSearch').button("loading");
+    $.ajax({
+      url: '/automation_jobs/getAndroidAutomationJobsByTransportProvider',
+      type: 'get',
+      dataType: 'json',
+      data : {
+        'transport_provider_id' : transport_provider_id
+      },
+      success: function(data) {
+        var options = $('#filter_android_automation_job');
+        options.empty();
+        options.append($("<option />").val('').text('All'));
+        $.each(data, function () {
+          $.each(this, function(k, v) {
+            options.append($("<option />").val(v.id).text(v.id));
+          });
+        });
+      },
+      complete: function() {
+        $('#btnSearch').button("reset");
+      }
+    });
+
+  }
+});

assets/js/pages/animations_css3.js

@@ -0,0 +1,27 @@
+/* ------------------------------------------------------------------------------
+*
+*  # CSS animations
+*
+*  Specific JS code additions for components_animations.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Toggle animations
+    $("body").on("click", ".animation", function (e) {
+
+        // Get animation class from "data" attribute
+        var animation = $(this).data("animation");
+
+        // Apply animation once per click
+        $(this).parents(".panel").addClass("animated " + animation).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
+            $(this).removeClass("animated " + animation);
+        });
+        e.preventDefault();
+    });
+
+});

assets/js/pages/animations_velocity_basic.js

@@ -0,0 +1,50 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Basic Velocity.js animations
+*
+*  Specific JS code additions for extension_velocity_basic.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Run basic animations
+    $('.velocity-property').on('click', function (e) {
+        e.preventDefault();
+        
+        // Get animation class and panel
+        var property = $(this).data("property");
+        var value = $(this).data("value");
+
+        var property2 = $(this).data("property2");
+        var value2 = $(this).data("value2");
+
+        var property3 = $(this).data("property3");
+        var value3 = $(this).data("value3");
+
+        // Add options
+		var animateMap = {},
+		animateOptions = {
+			easing: 'easeInOut',
+			duration: 250
+		};
+		animateMap[property] = value;
+		animateMap[property2] = value2;
+		animateMap[property3] = value3;
+
+
+        // Add animation class to panel element
+        $(this).parents(".demo-velocity-box")
+        .velocity(animateMap, animateOptions)
+        .velocity("reverse", {
+        	delay: 1000,
+        	complete: function() {
+        		$(this).removeAttr('style');
+        	}
+        });
+    });
+    
+});

assets/js/pages/animations_velocity_examples.js

@@ -0,0 +1,238 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Advanced Velocity.js examples
+*
+*  Specific JS code additions for extension_velocity_examples.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Animation options
+    // ------------------------------
+
+	// Properties animation
+	$('.velocity-properties').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Chained animation
+	$('.velocity-chained').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity({
+			marginLeft: 20
+		}).velocity('reverse', {
+			delay: 1000
+		}).velocity({
+			marginRight: 20 
+		}).velocity('reverse', {
+			delay: 1000
+		}).velocity({
+			opacity: 0.5
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Stagger animation
+	$('.velocity-stagger').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideUpIn', {
+			stagger: 500
+		});
+	});
+
+
+	// Drag animation
+	$('.velocity-drag').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideUpBigIn', {
+			duration: 1000,
+			drag: true
+		});
+	});
+
+
+	// Backwards animation
+	$('.velocity-backwards').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideDownOut', {
+			stagger: 400,
+			backwards: true
+		})
+	    .velocity({ opacity: 1 }, {
+	      duration: 500,
+	      display: "block"
+	    });
+	});
+
+
+
+    // Animation callbacks
+    // ------------------------------
+
+	// Begin callback
+	$('.velocity-begin').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			begin: function() {
+				alert('Begin callback example');
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Complete callback
+	$('.velocity-complete').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			complete: function() {
+				alert('Complete callback example');
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Progress callback animation
+	$('.velocity-progress').on('click', function (e) {
+		e.preventDefault();
+
+		var $percentComplete = $("#percentComplete"),
+		    $timeRemaining = $("#timeRemaining");
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			duration: 1000,
+			progress: function(elements, percentComplete, timeRemaining, timeStart) {
+				$percentComplete.html(Math.round(percentComplete * 100) + "% complete.");
+				$timeRemaining.html(timeRemaining + "ms remaining.");
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+
+    // Animate layout on page load
+    // ------------------------------
+
+	// Hide elements first
+	$(".sidebar, .navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
+		.css('opacity', 0);
+
+
+	// Animate when Pace loading is done
+    Pace.on('done', function () {
+
+		// Layout parts
+		$(".navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
+			.css('opacity', 1)
+			.velocity("transition.slideDownIn", {
+				stagger: 200,
+				duration: 200,
+				complete: function(elements) {
+					$(this).removeAttr('style');
+				}
+		});
+
+
+		// Sidebar
+		$(".sidebar")
+			.css({opacity: 0, borderColor: 'transparent'})
+			.velocity("transition.slideUpIn", {
+				delay: 100,
+				duration: 500,
+				display: 'table-cell',
+				complete: function(elements) {
+					$(this).removeAttr('style');
+				}
+		});
+
+
+		// Navigation list on load
+		$(".navigation > li")
+			.css('opacity', 0)
+			.velocity("transition.slideLeftIn", {
+				delay: 500,
+				stagger: 75,
+				duration: 200,
+				complete: function(elements) {
+					$(this).removeAttr('style')
+				}
+		});
+
+
+		// Navigation list on click
+		$(".navigation .has-ul").on('click', function() {
+			if ($(this).parent('li').hasClass('active')) {
+				$(this).next('ul').children('li').css('opacity', 0).velocity("transition.fadeIn", {
+					delay: 150,
+					stagger: 30,
+					duration: 200,
+					complete: function(elements) {
+						$(this).removeAttr('style')
+					}
+				});
+			} else {
+				$(this).next('ul').children('li').css('opacity', 0).velocity("transition.slideLeftOut", {
+					duration: 200,
+					complete: function(elements) {
+						$(this).removeAttr('style')
+					}
+				});
+			}
+		});
+    });
+
+});

assets/js/pages/animations_velocity_ui.js

@@ -0,0 +1,47 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Velocity.js UI
+*
+*  Specific JS code additions for extension_velocity_ui.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Run animations
+    $('.velocity-animation').on('click', function (e) {
+
+        // Get animation class and panel
+        var animation = $(this).data("animation");
+
+        // Add animation class to panel element
+        $(this).parents(".panel").velocity("callout." + animation, { stagger: 500 });
+        e.preventDefault();
+    });
+
+
+    // Run transitions
+    $('.velocity-transition').on('click', function (e) {
+
+        // Get animation class and panel
+        var transition = $(this).data("transition");
+
+        // Add animation class to panel element
+        $(this).parents(".panel").velocity("transition." + transition, { 
+        	stagger: 1000,
+        	duration: 1000
+		});
+
+        e.preventDefault();
+    });
+
+
+	// Clear styles after 2 seconds
+	window.setInterval(function(){
+		$('.velocity-transition').parents('.panel').removeAttr('style');
+	}, 2000);
+
+});

assets/js/pages/appearance_draggable_panels.js

@@ -0,0 +1,126 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Draggable panels
+ *
+ *  Specific JS code additions for appearance_draggable_panels.html page
+ *
+ *  Version: 1.0
+ *  Latest update: Aug 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Sortable rows
+    $(".row-sortable").sortable({
+        connectWith: '.row-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Sortable column
+    $(".column-panel-sortable").sortable({
+        connectWith: '.column-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Exclude element from sort
+    $(".sortable-exclude").sortable({
+        connectWith: '.custom-sortable',
+        items: '.panel:not(.skip-sort)',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Change sort handle
+    $(".sortable-heading").sortable({
+        connectWith: '.heading-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '.panel-title, [data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Sortable panel
+    $(".sortable-panel").sortable({
+        connectWith: '.panel-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Sortable elements
+    $(".elements-sortable").sortable({
+        connectWith: '.elements-sortable',
+        items: '.panel-heading, .table-responsive',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+});

assets/js/pages/appearance_panel_heading.js

@@ -0,0 +1,135 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Panel heading elements
+*
+*  Specific JS code additions for appearance_panel_heading.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Sliders
+    // -------------------------
+
+    // jQuery UI slider
+    $(".ui-slider").slider({
+        range: true,
+        min: 0,
+        max: 60,
+        values: [ 10, 50 ]
+    });
+
+
+    // NoUI slider
+    var slider_noui = document.getElementById('noui-slider-demo');
+    noUiSlider.create(slider_noui, {
+        start: [ 4000, 8000 ],
+        connect: true,
+        range: {
+            'min': [  2000 ],
+            'max': [ 10000 ]
+        }
+    });
+
+
+
+    // Selects
+    // -------------------------
+
+    // SelectBoxIt dropdowns
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        width: 220
+    });
+
+
+    // Bootstrap select
+    $('.bootstrap-select').selectpicker();
+
+
+    // Select2 selects
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 220
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        dropRight: true,
+        onChange: function(option, checked, select) {
+            $.uniform.update();
+        }
+    });
+
+
+
+    // Form components
+    // -------------------------
+
+    // Touchspin spinners
+    $(".touchspin-postfix").TouchSpin({
+        min: 0,
+        max: 100,
+        step: 0.1,
+        decimals: 2,
+        postfix: '%'
+    });
+
+
+    // Switchery toggles
+    if (Array.prototype.forEach) {
+        var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
+        elems.forEach(function(html) {
+            var switchery = new Switchery(html);
+        });
+    }
+    else {
+        var elems = document.querySelectorAll('.switchery');
+
+        for (var i = 0; i < elems.length; i++) {
+            var switchery = new Switchery(elems[i]);
+        }
+    }
+
+    // Bootstrap switches
+    $(".switch").bootstrapSwitch();
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({ radioClass: 'choice' });
+
+
+    // Single file uploader
+    $('.file-styled').uniform({
+        fileButtonClass: 'action btn bg-warning-400 btn-icon',
+        fileButtonHtml: '<i class="icon-upload"></i>'
+    });
+
+
+
+    // Other components
+    // -------------------------
+
+    // jQuery UI Sortable
+    $(".sortable").sortable({
+        connectWith: '.sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+});

assets/js/pages/automation_jobs/form.js

@@ -0,0 +1,44 @@
+window.addEventListener('load', function() {
+  $('input[datepicker]').datepicker({
+    format: "yyyy-mm-dd",
+    autoclose: true
+  });
+
+  var transportProviderInput = $('#transport-provider').select2({
+    placeholder: 'Search by Transport Provider name',
+    maximumSelectionSize: 1,
+    minimumInputLength: 3,
+    ajax: {
+      url: '/transport_provider/searchTransportProvider',
+      type: 'GET',
+      dataType: 'json',
+      delay: 250,
+      data: function (params) {
+        const query = {
+          name: params.term,
+          page: params.page || 1
+        }
+        return query;
+      },
+      processResults: function(res, params) {
+        const { data, total } = res;
+        params.page = params.page || 1;
+        return {
+          results: data.map(item => ({ id: item.id, text: item.name })),
+          pagination: {
+            more: (params.page * 20 ) < +total
+          }
+        };
+      }
+    },
+  });
+
+  $('#automation-job-form').on('submit', function(e) {
+    if (transportProviderInput && transportProviderInput.val()) {
+      const selectedText = transportProviderInput.select2('data')[0].text;
+      $(this).append(`<input type="hidden" name="transport_provider_name" value="${selectedText.trim()}" />`)
+    }
+
+    return true;
+  });
+});

assets/js/pages/automation_jobs/list.js

@@ -0,0 +1,71 @@
+window.addEventListener('load', function() {
+  $('#searchForm').on('submit', function(e) {
+    const searchKeyword = $("#searchText").val();
+
+    if (!searchKeyword) {
+      $('#searchText').attr('disabled', 'disabled');
+    }
+
+    return true;
+  });
+
+  $('.btn-remove').on('click', function(e) {
+    e.preventDefault();
+
+    const itemId = $(this).data('id');
+    const jobName = $(this).data('job');
+
+    $modal = $('#remove-job-warning-modal');
+    $modal.find('h4.modal-title').text(`Removing name: ${jobName}`);
+    $modal.find('#removeBtn').data('id', itemId);
+  });
+
+  $('#removeBtn').on('click', function(e) {
+    e.preventDefault();
+    const itemId = $(this).data('id');
+    window.__api__.remove(`/automation_jobs/remove/${itemId}`, itemId);
+  });
+
+  var transportProviderInput = $('#transport-provider').select2({
+    placeholder: 'Search by Transport Provider name',
+    maximumSelectionSize: 1,
+    minimumInputLength: 3,
+    ajax: {
+      url: '/transport_provider/searchTransportProvider',
+      type: 'GET',
+      dataType: 'json',
+      delay: 250,
+      data: function (params) {
+        const query = {
+          name: params.term,
+          page: params.page || 1
+        }
+        return query;
+      },
+      processResults: function(res, params) {
+        const { data, total } = res;
+        params.page = params.page || 1;
+        return {
+          results: data.map(item => ({ id: item.id, text: item.name })),
+          pagination: {
+            more: (params.page * 20 ) < +total
+          }
+        };
+      }
+    },
+  });
+
+  $('#search-form').on('submit', function(e) {
+    if (transportProviderInput && transportProviderInput.val()) {
+      const selectedText = transportProviderInput.select2('data')[0].text;
+      $(this).append(`<input type="hidden" name="transport_provider_name" value="${selectedText.trim()}" />`)
+    }
+
+    return true;
+  });
+
+  addDatePicker('#from_complete');
+  addDatePicker('#to_complete');
+
+  $('.select2-container').css('width', '37%');
+});

assets/js/pages/blog/index.js

@@ -0,0 +1,273 @@
+// selectedBlog = [id, blog_id, description, status]
+const selectedBlog = [];
+
+// Current state
+let currentPageNo = 1;
+let currentPageSize = 10;
+const filterParams = {
+    blog_id: 0,
+    description: '',
+    status: -1
+};
+
+$('#add-form').submit(function(e){
+    e.preventDefault();
+
+    const inputs = $('#add-form input, #add-form select');
+    const data = {};
+
+    inputs.each(function() {
+        data[this.name] = $(this).val();
+    });
+
+    $.ajax({
+        method: 'post',
+        url: '/blog/store',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            loadPage(filterParams);
+            alert(res.message);
+        },
+
+        error: function(err) {
+            alertErr(err.responseJSON.errors);
+        }
+    });
+});
+
+$('#update-form').submit(function(e){
+    e.preventDefault();
+
+    const inputs = $('#update-form input, #update-form select');
+    const data = {};
+
+    inputs.each(function() {
+        data[this.name] = $(this).val();
+    });
+
+    $.ajax({
+        method: 'post',
+        url: '/blog/update',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            loadPage(filterParams);
+            alert(res.message);
+        },
+
+        error: function(err) {
+            alertErr(err.responseJSON.errors);
+        }
+    });
+});
+
+$('#filter-form').submit(function(e){
+    e.preventDefault();
+
+    const inputs = $('#filter-form input, #filter-form select');
+
+    inputs.each(function() {
+        filterParams[this.name] = $(this).val();
+    });
+
+    // Set pageNo back to 1 when filter blogs
+    currentPageNo = 1;
+
+    loadPage(filterParams);
+});
+
+function deleteBlog(el) {
+    const r = confirm('Are you sure?');
+
+    if(r === false) {
+        return;
+    }
+
+    const data = {
+        id: $(el).data('id')
+    };
+    
+    $.ajax({
+        method: 'post',
+        url: '/blog/delete',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            loadPage(filterParams);
+        },
+
+        error: function(err) {
+            alertErr(err.responseJSON.errors);
+        }
+    });
+}
+
+function bindRowSelectEvent() {
+    $('#blog-table tr').click(function(e) {
+        if($(e.target)[0].tagName.toLowerCase() === 'button' || !$(e.target).parent().data('id')) {
+            return;
+        }
+
+        $('#add-form-wrapper').hide();
+        $('#update-form-wrapper').show();
+
+        selectedBlog[0] = $(this).data('id');
+        selectedBlog[1] = $(this).find('td').eq(0).text();
+        selectedBlog[2] = $(this).find('td').eq(1).text();
+        selectedBlog[3] = $(this).find('td').eq(2).data('status');
+
+        const inputs = $('#update-form input, #update-form select');
+
+        $.each(selectedBlog, function(index, value) {
+            $(inputs[index]).val(value);
+        });
+    });
+}
+
+function showAddForm() {
+    $('#add-form-wrapper').show();
+    $('#update-form-wrapper').hide();
+}
+
+function loadPage(params = null) {
+    $('#blog-table').hide();
+    $('#blog-table-loading').show();
+
+    const data = {
+        pageNo: currentPageNo,
+        pageSize: currentPageSize
+    };
+
+    if(params) {
+        data.params = params;
+    }
+
+    $.ajax({
+        method: 'post',
+        url: '/blog/getBlogs',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            $('#blog-table').show();
+            $('#blog-table-loading').hide();
+
+            if (res.result.length === 0 && res.pageNo > 0) {
+                currentPageNo--;
+                return loadPage(filterParams);
+            }
+
+            renderBlogTable(res.result);
+            renderPagination(res.total, res.pageSize, res.pageNo + 1);
+        },
+        
+        error: function(err) {
+            $('#blog-table').show();
+            $('#blog-table-loading').hide();
+
+            alertErr(err.responseJSON.errors);
+        }
+    });
+}
+
+function getBlogs(params = null, pageNo = 1, pageSize = 10) {
+    $('#blog-table').hide();
+    $('#blog-table-loading').show();
+
+    const data = {
+        params,
+        pageNo,
+        pageSize
+    };
+    
+    $.ajax({
+        method: 'post',
+        url: '/blog/getBlogs',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            $('#blog-table').show();
+            $('#blog-table-loading').hide();
+
+            renderBlogTable(res.result);
+        },
+        
+        error: function(err) {
+            $('#blog-table').show();
+            $('#blog-table-loading').hide();
+
+            alertErr(err.responseJSON.errors);
+        }
+    });
+}
+
+function renderBlogTable(result) {
+    $('#blog-table tbody').empty();
+
+    if (result.length === 0) {
+        const tr = "<tr><td>No result</td><td>No result</td><td>No result</td><td>No result</td></tr>";
+        $('#blog-table tbody').append(tr);
+        return;
+    }
+
+    for (index in result) {
+        var id = result[index].id;
+        var blog_id = result[index].blog_id;
+        var description = result[index].description;
+        var status = result[index].status;
+
+        var tr = `<tr data-id="${id}" style='cursor: pointer'>`;
+        tr += `<td>${blog_id}</td>`;
+        tr += `<td>${description}</td>`;
+        tr += `<td data-status="${status}" style="text-align:center">${status == 1 ? 'Active' : 'Inactive'}</td>`;
+        tr += `<td><button data-id="${id}" class="btn btn-danger" onclick="deleteBlog(this)">Delete</button></td>`;
+        tr += "</tr>";
+
+        $('#blog-table tbody').append(tr);
+    }
+
+    bindRowSelectEvent();
+}
+
+function renderPagination(total, pageSize, pageNo = 1) {
+    $('#blog-pagination').empty();
+    $('#blog-pagination').unbind('page');
+    $('#blog-pagination').bootpag({
+        total: Math.ceil(total / pageSize),
+        page: pageNo,
+        maxVisible: 5,
+        leaps: true,
+        firstLastUse: true,
+        first: '←',
+        last: '→',
+        wrapClass: 'pagination',
+        activeClass: 'active',
+        disabledClass: 'disabled',
+        nextClass: 'next',
+        prevClass: 'prev',
+        lastClass: 'last',
+        firstClass: 'first'
+    }).on("page", function(event, pageNo) {
+        // Save current state for loadPage function
+        currentPageNo = pageNo;
+        currentPageSize = pageSize;
+
+        getBlogs(filterParams, pageNo, pageSize);
+    });
+}
+
+function alertErr(err) {
+    const errors = Object.values(err);
+    let message = '';
+    
+    for (index in errors) {
+        message += errors[index] + ' ';
+    }
+
+    alert(message);
+}

assets/js/pages/blog_app_article/index.js

@@ -0,0 +1,315 @@
+// selectedBlog = [id, blog_id, description, status]
+const selectedBlog = [];
+
+// Current state
+let currentPageNo = 1;
+let currentPageSize = 10;
+const filterParams = {
+    blog_id: 0,
+    description: '',
+    status: -1
+};
+
+$('#add-form').submit(function(e){
+    e.preventDefault();
+
+    const inputs = $('#add-form input, #add-form select');
+    const data = {};
+
+    inputs.each(function() {
+        data[this.name] = $(this).val();
+    });
+
+    $.ajax({
+        method: 'post',
+        url: '/blog_app_articles/store',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            loadPage(filterParams);
+            alert(res.message);
+        },
+
+        error: function(err) {
+            alertErr(err.responseJSON.errors);
+        }
+    });
+});
+
+$('#update-form').submit(function(e){
+    e.preventDefault();
+
+    const inputs = $('#update-form input, #update-form select');
+    const data = {};
+
+    inputs.each(function() {
+        data[this.name] = $(this).val();
+    });
+
+    $.ajax({
+        method: 'post',
+        url: '/blog_app_articles/update',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            loadPage(filterParams);
+            alert(res.message);
+        },
+
+        error: function(err) {
+            alertErr(err.responseJSON.errors);
+        }
+    });
+});
+
+$('#filter-form').submit(function(e){
+    e.preventDefault();
+
+    const inputs = $('#filter-form input, #filter-form select');
+
+    inputs.each(function() {
+        filterParams[this.name] = $(this).val();
+    });
+
+    // Set pageNo back to 1 when filter blogs
+    currentPageNo = 1;
+
+    loadPage(filterParams);
+});
+
+function deleteBlog(el) {
+    const r = confirm('Are you sure?');
+
+    if(r === false) {
+        return;
+    }
+
+    const data = {
+        id: $(el).data('id')
+    };
+    
+    $.ajax({
+        method: 'post',
+        url: '/blog_app_articles/delete',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            loadPage(filterParams);
+        },
+
+        error: function(err) {
+            alertErr(err.responseJSON.errors);
+        }
+    });
+}
+
+function bindRowSelectEvent() {
+    $('#blog-table tr').click(function(e) {
+        if($(e.target)[0].tagName.toLowerCase() === 'button' || !$(e.target).parent().data('id')) {
+            return;
+        }
+
+        $('#add-form-wrapper').hide();
+        $('#update-form-wrapper').show();
+
+        selectedBlog[0] = $(this).data('id');
+        selectedBlog[1] = $(this).find('td').eq(0).text();
+        selectedBlog[2] = $(this).find('td').eq(1).text();
+        selectedBlog[3] = $(this).find('td').eq(2).data('status');
+
+        const inputs = $('#update-form input, #update-form select');
+
+        $.each(selectedBlog, function(index, value) {
+            $(inputs[index]).val(value);
+        });
+    });
+}
+
+function showAddForm() {
+    $('#add-form-wrapper').show();
+    $('#update-form-wrapper').hide();
+}
+
+function loadPage(params = null) {
+    $('#blog-table').hide();
+    $('#blog-table-loading').show();
+
+    const data = {
+        pageNo: currentPageNo,
+        pageSize: currentPageSize
+    };
+
+    if(params) {
+        data.params = params;
+    }
+
+    $.ajax({
+        method: 'post',
+        url: '/blog_app_articles/getBlogs',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            $('#blog-table').show();
+            $('#blog-table-loading').hide();
+
+            if (res.result.length === 0 && res.pageNo > 0) {
+                currentPageNo--;
+                return loadPage(filterParams);
+            }
+
+            renderBlogTable(res.result);
+            renderPagination(res.total, res.pageSize, res.pageNo + 1);
+        },
+        
+        error: function(err) {
+            $('#blog-table').show();
+            $('#blog-table-loading').hide();
+
+            alertErr(err.responseJSON.errors);
+        }
+    });
+}
+
+function getBlogs(params = null, pageNo = 1, pageSize = 10) {
+    $('#blog-table').hide();
+    $('#blog-table-loading').show();
+
+    const data = {
+        params,
+        pageNo,
+        pageSize
+    };
+    
+    $.ajax({
+        method: 'post',
+        url: '/blog_app_articles/getBlogs',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            $('#blog-table').show();
+            $('#blog-table-loading').hide();
+
+            renderBlogTable(res.result);
+        },
+        
+        error: function(err) {
+            $('#blog-table').show();
+            $('#blog-table-loading').hide();
+
+            alertErr(err.responseJSON.errors);
+        }
+    });
+}
+
+function renderBlogTable(result) {
+    $('#blog-table tbody').empty();
+
+    if (result.length === 0) {
+        const tr = "<tr><td>No result</td><td>No result</td><td>No result</td><td>No result</td></tr>";
+        $('#blog-table tbody').append(tr);
+        return;
+    }
+
+    for (index in result) {
+        var id = result[index].id;
+        var blog_id = result[index].blog_id;
+        var description = result[index].description;
+        var status = result[index].status;
+
+        var tr = `<tr data-id="${id}" style='cursor: pointer'>`;
+        tr += `<td>${blog_id}</td>`;
+        tr += `<td>${description}</td>`;
+        tr += `<td data-status="${status}" style="text-align:center">${status == 1 ? 'Active' : 'Inactive'}</td>`;
+        tr += `<td><button data-id="${id}" class="btn btn-danger" onclick="deleteBlog(this)">Delete</button></td>`;
+        tr += "</tr>";
+
+        $('#blog-table tbody').append(tr);
+    }
+
+    bindRowSelectEvent();
+}
+
+function renderPagination(total, pageSize, pageNo = 1) {
+    $('#blog-pagination').empty();
+    $('#blog-pagination').unbind('page');
+    $('#blog-pagination').bootpag({
+        total: Math.ceil(total / pageSize),
+        page: pageNo,
+        maxVisible: 5,
+        leaps: true,
+        firstLastUse: true,
+        first: '←',
+        last: '→',
+        wrapClass: 'pagination',
+        activeClass: 'active',
+        disabledClass: 'disabled',
+        nextClass: 'next',
+        prevClass: 'prev',
+        lastClass: 'last',
+        firstClass: 'first'
+    }).on("page", function(event, pageNo) {
+        // Save current state for loadPage function
+        currentPageNo = pageNo;
+        currentPageSize = pageSize;
+
+        getBlogs(filterParams, pageNo, pageSize);
+    });
+}
+
+function alertErr(err) {
+    const errors = Object.values(err);
+    let message = '';
+    
+    for (index in errors) {
+        message += errors[index] + ' ';
+    }
+
+    alert(message);
+}
+
+// Handle blog select
+// Get all blogs from blog.float.sg and render it
+function loadBlogs() {
+    $.ajax({
+        method: 'get',
+        url: 'https://blog.float.sg/wp-json/float/v1/latest-articles?limit=1000',
+        dataType: 'json',
+
+        success: function(res) {
+            $('#blog_list').empty();
+            $('#blog_list').append(
+                `<option value="">Select blog</option>`
+            );
+            $.each(res, function() {
+                $('#blog_list').append(
+                    `<option value="${this.ID}|${this.post_title}">${this.ID} | ${this.post_title}</option>`
+                );
+            })
+        },
+        
+        error: function(err) {
+            console.log(err);
+        }
+    });
+}
+
+// Bind event select blog from blog list select
+$('#blog_list').change(function() {
+    let val = $(this).val();
+    let blog_id = val.split('|')[0];
+    let description = val.split('|')[1];
+
+    if (val) {
+        $('#new_blog_id').val(blog_id);
+        $('#new_blog_description').val(description);
+        return;
+    }
+
+    $('#new_blog_id').val('');
+    $('#new_blog_description').val('');
+});

assets/js/pages/blog_single.js

@@ -0,0 +1,34 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Blog page - detailed
+*
+*  Specific JS code additions for blog page kit - detailed view
+*
+*  Version: 1.0
+*  Latest update: Oct 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+    
+
+    // CKEditor
+    // ------------------------------
+
+    CKEDITOR.replace( 'add-comment', {
+        height: '200px',
+        removeButtons: 'Subscript,Superscript',
+        toolbarGroups: [
+            { name: 'styles' },
+            { name: 'editing',     groups: [ 'find', 'selection' ] },
+            { name: 'basicstyles', groups: [ 'basicstyles' ] },
+            { name: 'paragraph',   groups: [ 'list', 'blocks', 'align' ] },
+            { name: 'links' },
+            { name: 'insert' },
+            { name: 'colors' },
+            { name: 'tools' },
+            { name: 'others' },
+            { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] }
+        ]
+    });    
+});

assets/js/pages/booking/index.js

@@ -0,0 +1,168 @@
+// Current state
+window.currentPageNo = 1;
+window.currentPageSize = 10;
+window.filterParams = {
+    id: 0,
+    quote_id: 0,
+    provider_booking_ref: '',
+    // details: '',
+    message: '',
+    status: '',
+    member_id: '',
+    cost: '',
+    created: '',
+    updated: '',
+    completed: ''
+};
+
+$('#filter-form').submit(e => {
+    e.preventDefault();
+
+    const inputs = $('#filter-form input, #filter-form select');
+
+    inputs.each(function() {
+        filterParams[this.name] = $(this).val();
+    });
+
+    // Set pageNo back to 1 when filter blogs
+    currentPageNo = 1;
+
+    loadPage(filterParams);
+})
+
+function loadPage(params = null) {
+    $('#booking-table').hide();
+    $('#booking-table-loading').show();
+
+    const data = {
+        pageNo: currentPageNo,
+        pageSize: currentPageSize
+    };
+
+    if(params) {
+        data.params = params;
+    }
+
+    $.ajax({
+        method: 'post',
+        url: '/booking/getReports',
+        dataType: 'json',
+        data: data,
+
+        success: function(res) {
+            $('#booking-table').show();
+            $('#booking-table-loading').hide();
+
+            if (res.result.length === 0 && res.pageNo > 0) {
+                currentPageNo--;
+                return loadPage(filterParams);
+            }
+
+            renderBookingTable(res.result);
+            renderPagination(res.total, res.pageSize, res.pageNo + 1);
+        },
+        
+        error: function(err) {
+            $('#booking-table').show();
+            $('#booking-table-loading').hide();
+
+            alertErr(err.responseJSON.errors);
+        }
+    });
+}
+
+function renderBookingTable(result) {
+    $('#booking-table tbody').empty();
+
+    if (result.length === 0) {
+        const tr = '<tr><td>No result</td><td>No result</td><td>No result</td><td>No result</td><td>No result</td><td>No result</td><td>No result</td><td>No result</td><td>No result</td><td>No result</td><td>No result</td></tr>';
+        $('#booking-table tbody').append(tr);
+        return;
+    }
+
+    for (index in result) {
+        var id = result[index].id;
+        var quote_id = result[index].quote_id;
+        var provider_booking_ref = result[index].provider_booking_ref;
+        var details = result[index].details;
+        var created = result[index].created;
+        var updated = result[index].updated;
+        var completed = result[index].completed;
+        var status = result[index].status;
+        var message = result[index].message;
+        var member_id = result[index].member_id;
+        var cost = result[index].cost;
+
+        var tr = '<tr>';
+        tr += `<td>${id}</td>`;
+        tr += `<td>${quote_id}</td>`;
+        tr += `<td>${provider_booking_ref}</td>`;
+        tr += `<td>${formatJSON(details)}</td>`;
+        tr += `<td>${created}</td>`;
+        tr += `<td>${updated}</td>`;
+        tr += `<td>${completed}</td>`;
+        tr += `<td>${status}</td>`;
+        tr += `<td>${message}</td>`;
+        tr += `<td>${member_id}</td>`;
+        tr += `<td>${cost}</td>`;
+        tr += '</tr>';
+
+        $('#booking-table tbody').append(tr);
+    }
+}
+
+function renderPagination(total, pageSize, pageNo = 1) {
+    $('#booking-pagination').unbind('page');
+    $('#booking-pagination').empty();
+    $('#booking-pagination').bootpag({
+        total: Math.ceil(total / pageSize),
+        page: pageNo,
+        maxVisible: 5,
+        leaps: true,
+        firstLastUse: true,
+        first: '←',
+        last: '→',
+        wrapClass: 'pagination',
+        activeClass: 'active',
+        disabledClass: 'disabled',
+        nextClass: 'next',
+        prevClass: 'prev',
+        lastClass: 'last',
+        firstClass: 'first'
+    }).on('page', function(event, pageNo) {
+        // Save current state for loadPage function
+        currentPageNo = pageNo;
+        currentPageSize = pageSize;
+
+        loadPage(filterParams);
+    });
+}
+
+// Format JSON string from backend so that we can read it easier
+function formatJSON(jsonStr) {
+    let data = JSON.parse(jsonStr);
+
+    let formatedStr = Object.keys(data).map(key => {
+        // Check value of object is an object
+        if(typeof data[key] === 'object') {
+            return Object.keys(data[key]).map(subKey => {
+                return subKey + ': ' + data[key][subKey];
+            }).join(', ');
+        }
+
+        return key + ': ' + data[key];
+    }).join(', ');
+
+    return formatedStr;
+}
+
+function alertErr(err) {
+    const errors = Object.values(err);
+    let message = '';
+    
+    for (index in errors) {
+        message += errors[index] + ' ';
+    }
+
+    alert(message);
+}

assets/js/pages/chat_layouts.js

@@ -0,0 +1,17 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Chat layouts
+*
+*  Specific JS code additions for chat_layouts.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Scroll to bottom of the chat on page load. Mainly for demo
+	$('.chat-list, .chat-stacked').scrollTop($(this).height());
+
+});

assets/js/pages/colors_blue.js

@@ -0,0 +1,131 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Blue palette colors
+*
+*  Specific JS code additions for colors_blue.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-blue'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-blue'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-blue',
+        dropdownCssClass: 'bg-blue'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-blue',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted blue notice..', { theme: 'bg-blue-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'blue Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-blue22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-blue-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#03A9F4'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-blue text-blue-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-blue'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-blue"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-blue"><div class="arrow"></div><h3 class="popover-title bg-blue"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-blue"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_brown.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Brown palette colors
+*
+*  Specific JS code additions for colors_brown.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-brown'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-brown'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-brown',
+        dropdownCssClass: 'bg-brown'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-brown',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted brown notice..', { theme: 'bg-brown-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'brown Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-brown22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-brown-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#795548'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-brown text-brown-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-brown'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-brown"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-brown"><div class="arrow"></div><h3 class="popover-title bg-brown"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-brown"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_danger.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Danger palette colors
+*
+*  Specific JS code additions for colors_danger.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-danger-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-danger-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-danger-400',
+        dropdownCssClass: 'bg-danger-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-danger-400',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted danger notice..', { theme: 'bg-danger-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-danger'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#EF5350'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-danger text-danger-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-danger'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-danger-400"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-danger-400"><div class="arrow"></div><h3 class="popover-title bg-danger-400"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-danger-400"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_green.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Green palette colors
+*
+*  Specific JS code additions for colors_green.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-green-600'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-green-600'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-green-600',
+        dropdownCssClass: 'bg-green-600'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-green-600',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted green notice..', { theme: 'bg-green', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-green'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#7CB342'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-green text-green-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-green'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-green-600"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-green-600"><div class="arrow"></div><h3 class="popover-title bg-green-600"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-green-600"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_grey.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Grey palette colors
+*
+*  Specific JS code additions for colors_grey.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-grey-600'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-grey-600'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-grey-600',
+        dropdownCssClass: 'bg-grey-600'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-grey-600',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted grey notice..', { theme: 'bg-grey', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-grey'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#757575'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-grey text-grey-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-grey'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-grey-600"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-grey-600"><div class="arrow"></div><h3 class="popover-title bg-grey-600"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-grey-600"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_indigo.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Indigo palette colors
+*
+*  Specific JS code additions for colors_indigo.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-indigo-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-indigo-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-indigo-400',
+        dropdownCssClass: 'bg-indigo-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-indigo',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted indigo notice..', { theme: 'bg-indigo-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'indigo Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-indigo22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-indigo-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#3F51B5'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-indigo text-indigo-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-indigo'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-indigo"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-indigo"><div class="arrow"></div><h3 class="popover-title bg-indigo"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-indigo"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_info.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Info palette colors
+*
+*  Specific JS code additions for colors_info.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-info'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-info'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-info',
+        dropdownCssClass: 'bg-info'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-info',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted info notice..', { theme: 'bg-info-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-info-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#00BCD4'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-info text-info-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-info'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-info"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-info"><div class="arrow"></div><h3 class="popover-title bg-info"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-info"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_orange.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Orange palette colors
+*
+*  Specific JS code additions for colors_orange.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-orange-600'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-orange-600'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-orange-600',
+        dropdownCssClass: 'bg-orange-600'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-orange-600',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted orange notice..', { theme: 'bg-orange', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-orange'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#FB8C00'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-orange text-orange-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-orange'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-orange-600"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-orange-600"><div class="arrow"></div><h3 class="popover-title bg-orange-600"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-orange-600"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_pink.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Pink palette colors
+*
+*  Specific JS code additions for colors_pink.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-pink'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-pink'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-pink',
+        dropdownCssClass: 'bg-pink'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-pink',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted pink notice..', { theme: 'bg-pink-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'pink Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-pink22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-pink-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#E91E63'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-pink text-pink-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-pink'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-pink"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-pink"><div class="arrow"></div><h3 class="popover-title bg-pink"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-pink"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_primary.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Primary palette colors
+*
+*  Specific JS code additions for colors_primary.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-primary'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-primary'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-primary',
+        dropdownCssClass: 'bg-primary'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-primary',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted primary notice..', { theme: 'bg-primary-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-primary-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#2196F3'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-primary text-primary-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-primary'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-primary"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-primary"><div class="arrow"></div><h3 class="popover-title bg-primary"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-primary"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_purple.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Purple palette colors
+*
+*  Specific JS code additions for colors_purple.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-purple-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-purple-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-purple-400',
+        dropdownCssClass: 'bg-purple-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-purple-400',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted purple notice..', { theme: 'bg-purple-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-purple'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#7E57C2'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-purple text-purple-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-purple'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-purple-400"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-purple-400"><div class="arrow"></div><h3 class="popover-title bg-purple-400"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-purple-400"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_slate.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Slate palette colors
+*
+*  Specific JS code additions for colors_slate.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-slate'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-slate'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-slate',
+        dropdownCssClass: 'bg-slate'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-slate',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted slate notice..', { theme: 'bg-slate-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'slate Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-slate22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-slate-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#607D8B'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-slate text-slate-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-slate'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-slate"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-slate"><div class="arrow"></div><h3 class="popover-title bg-slate"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-slate"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_success.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Success palette colors
+*
+*  Specific JS code additions for colors_success.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-success'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-success'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-success',
+        dropdownCssClass: 'bg-success'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-success',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted success notice..', { theme: 'bg-success-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-success-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#4CAF50'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-success text-success-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-success'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-success"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-success"><div class="arrow"></div><h3 class="popover-title bg-success"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-success"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_teal.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Teal palette colors
+*
+*  Specific JS code additions for colors_teal.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-teal'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-teal'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-teal',
+        dropdownCssClass: 'bg-teal'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-teal',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted teal notice..', { theme: 'bg-teal-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'teal Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-teal22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-teal-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#009688'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-teal text-teal-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-teal'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-teal"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-teal"><div class="arrow"></div><h3 class="popover-title bg-teal"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-teal"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_violet.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Violet palette colors
+*
+*  Specific JS code additions for colors_violet.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-violet-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-violet-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-violet-400',
+        dropdownCssClass: 'bg-violet-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-violet-400',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted violet notice..', { theme: 'bg-violet-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-violet'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#7E57C2'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-violet text-violet-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-violet'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-violet-400"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-violet-400"><div class="arrow"></div><h3 class="popover-title bg-violet-400"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-violet-400"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/colors_warning.js

@@ -0,0 +1,130 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Warning palette colors
+*
+*  Specific JS code additions for colors_warning.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-warning-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-warning-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-warning-400',
+        dropdownCssClass: 'bg-warning-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-warning-400',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted warning notice..', { theme: 'bg-warning-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-warning'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#FF7043'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-warning text-warning-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-warning'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-warning-400"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-warning-400"><div class="arrow"></div><h3 class="popover-title bg-warning-400"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-warning-400"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

assets/js/pages/components_affix.js

@@ -0,0 +1,104 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Affix and scrollspy
+*
+*  Specific JS code additions for components_affix.html page
+*
+*  Version: 1.1
+*  Latest update: Feb 25, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+	// Resize sidebar on scroll
+    // ------------------------------
+
+    // Resize fixed sidebar vertically when bottom reached
+    function resizeFixed() {
+        $(window).on('load scroll', function() {
+          if ($(window).scrollTop() > $(document).height() - $(window).height() - 70) {
+            $('.sidebar-fixed').addClass('fixed-sidebar-space');
+          }
+          else {
+            $('.sidebar-fixed').removeClass('fixed-sidebar-space');
+          }
+        });
+    }
+
+
+    // Nice scroll
+    // ------------------------------
+
+	// Setup
+	function initScroll() {
+	    $(".sidebar-fixed .sidebar-content").niceScroll({
+	        mousescrollstep: 100,
+	        cursorcolor: '#ccc',
+	        cursorborder: '',
+	        cursorwidth: 3,
+	        hidecursordelay: 100,
+	        autohidemode: 'scroll',
+	        horizrailenabled: false,
+	        preservenativescrolling: false,
+	        railpadding: {
+	        	right: 0.5,
+	        	top: 1.5,
+	        	bottom: 1.5
+	        }
+	    });
+	}
+
+	// Resize
+	function resizeScroll() {
+		$('.sidebar-fixed .sidebar-content').getNiceScroll().resize();
+	}
+
+	// Remove
+	function removeScroll() {
+		$(".sidebar-fixed .sidebar-content").getNiceScroll().remove();
+		$(".sidebar-fixed .sidebar-content").removeAttr('style').removeAttr('tabindex');
+	}
+
+
+    // Affix detached sidebar
+    // ------------------------------
+
+    // Init nicescroll when sidebar affixed
+	$('.sidebar-fixed').on('affix.bs.affix', function() {
+		initScroll();
+		resizeFixed();
+	});
+
+    // When effixed top, remove scrollbar and its data
+    $('.sidebar-fixed').on('affix-top.bs.affix', function() {
+		removeScroll();
+
+        $(".sidebar-fixed .sidebar-content").removeAttr('style').removeAttr('tabindex');
+    });
+
+	// Attach BS affix component to the sidebar
+	$('.sidebar-fixed').affix({
+		offset: {
+			top: $('.sidebar-fixed').offset().top - 20 // top offset - computed line height
+		}
+	});
+
+
+    // Remove affix and scrollbar on mobile
+    $(window).on('resize', function() {
+        setTimeout(function() {            
+            if($(window).width() <= 768) {
+
+                // Remove nicescroll on mobiles
+                removeScroll();
+
+                // Remove affix on mobile
+                $(window).off('.affix')
+                $('.sidebar-fixed').removeData('affix').removeClass('affix affix-top affix-bottom');
+            }
+        }, 100);
+    }).resize();
+
+});

assets/js/pages/components_buttons.js

@@ -0,0 +1,98 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Buttons and button dropdowns
+*
+*  Specific JS code additions for components_buttons.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Buttons with progress/spinner
+    // ------------------------------
+
+    // Initialize on button click
+    $('.btn-loading').click(function () {
+        var btn = $(this);
+        btn.button('loading')
+        setTimeout(function () {
+            btn.button('reset')
+        }, 3000)
+    });
+
+    // Button with spinner
+    Ladda.bind('.btn-ladda-spinner', {
+        dataSpinnerSize: 16,
+        timeout: 2000
+    });
+
+    // Button with progress
+    Ladda.bind('.btn-ladda-progress', {
+        callback: function(instance) {
+            var progress = 0;
+            var interval = setInterval(function() {
+                progress = Math.min(progress + Math.random() * 0.1, 1);
+                instance.setProgress(progress);
+
+                if( progress === 1 ) {
+                    instance.stop();
+                    clearInterval(interval);
+                }
+            }, 200);
+        }
+    });
+
+
+
+    // Animated dropdowns
+    // ------------------------------
+
+    // CSS3 animations
+    $('.dropdown-animated, .btn-group-animated').on('show.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').addClass('animated bounceIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
+            $(this).removeClass('animated bounceIn')
+        });
+    });
+
+
+    //
+    // Velocity animations
+    //
+
+    // Open
+    $('.dropdown-velocity, .btn-group-velocity').on('show.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').velocity('transition.slideUpIn', {
+            duration: 200
+        })
+    });
+
+    // Close
+    $('.dropdown-velocity, .btn-group-velocity').on('hide.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').velocity('transition.slideLeftOut', {
+            duration: 200,
+            complete: function() {
+                $(this).removeAttr('style');
+            }
+        })
+    });
+
+
+    //
+    // jQuery animations
+    //
+
+    // Open
+    $('.dropdown-fade, .btn-group-fade').on('show.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').fadeIn(250);
+    });
+
+    // Close
+    $('.dropdown-fade, .btn-group-fade').on('hide.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').fadeOut(250);
+    });
+
+});

assets/js/pages/components_dropdowns.js

@@ -0,0 +1,27 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Dropdown menus
+*
+*  Specific JS code additions for components_dropdowns.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Styled checkboxes/radios
+	$('.styled').uniform({
+		radioClass: 'choice'
+	});
+
+
+	// Switchery toggles
+	var toggle = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
+	
+	toggle.forEach(function(html) {
+		var switchery = new Switchery(html);
+    });
+
+});

assets/js/pages/components_loaders.js

@@ -0,0 +1,676 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Page and progress loaders
+*
+*  Specific JS code additions for components_loaders.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // ========================================
+    //
+    // Progress bars
+    //
+    // ========================================
+
+
+    // Basic progress bar
+    // ------------------------------
+
+    // Start
+    $('#h-default-basic-start').click(function() {
+        var $pb = $('#h-default-basic .progress-bar');
+        $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+        $pb.progressbar();
+    });
+
+    // Reset
+    $('#h-default-basic-reset').click(function() {
+        $('#h-default-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
+    });
+
+
+
+    // Progress bar in right direction
+    // ------------------------------
+
+    // Start
+    $('#h-right-basic-start').click(function() {
+        var $pb = $('#h-right-basic .progress-bar');
+        $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+        $pb.progressbar();
+    });
+
+    // Reset
+    $('#h-right-basic-reset').click(function() {
+        $('#h-right-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
+    });
+
+
+
+    // Progress bar with text fill
+    // ------------------------------
+
+    // Start
+    $('#h-fill-basic-start').click(function() {
+        var $pb = $('#h-fill-basic .progress-bar');
+        $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+        $pb.progressbar({display_text: 'fill'});
+    });
+
+    // Reset
+    $('#h-fill-basic-reset').click(function() {
+        $('#h-fill-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({display_text: 'fill'});
+    });
+            
+
+
+    // Progress bar with non-percentage text
+    // ------------------------------
+
+    // Start
+    $('#h-fill-nonpercentage-basic-start').click(function() {
+        var $pb = $('#h-fill-nonpercentage-basic .progress-bar');
+        $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+        $pb.progressbar({display_text: 'fill', use_percentage: false});
+    });
+
+    // Reset
+    $('#h-fill-nonpercentage-basic-reset').click(function() {
+        $('#h-fill-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({display_text: 'fill', use_percentage: false});
+    });
+
+
+
+    // Progress bar with centered text
+    // ------------------------------
+
+    // Start
+    $('#h-center-basic-start').click(function() {
+        var $pb = $('#h-center-basic .progress-bar');
+        $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+        $pb.progressbar({display_text: 'center'});
+    });
+
+    // Reset
+    $('#h-center-basic-reset').click(function() {
+        $('#h-center-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({display_text: 'center'});
+    });
+            
+
+
+    // Progress bar with centered non-percentage text
+    // ------------------------------
+
+    // Start
+    $('#h-center-nonpercentage-basic-start').click(function() {
+        var $pb = $('#h-center-nonpercentage-basic .progress-bar');
+        $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+        $pb.progressbar({display_text: 'center', use_percentage: false});
+    });
+
+    // Reset
+    $('#h-center-nonpercentage-basic-reset').click(function() {
+        $('#h-center-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({display_text: 'center', use_percentage: false});
+    });
+            
+
+
+    // Vertical progress bar
+    // ------------------------------
+
+    // Start
+    $('#v-default-basic-start').click(function() {
+        $('#v-default-basic .progress-bar').each(function () {
+            var $pb = $(this);
+            $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+            $pb.progressbar();
+        });
+    });
+
+    // Reset
+    $('#v-default-basic-reset').click(function() {
+        $('#v-default-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
+    });
+
+
+
+    // Bottom direction
+    // ------------------------------
+
+    // Start
+    $('#v-bottom-basic-start').click(function() {
+        $('#v-bottom-basic .progress-bar').each(function () {
+            var $pb = $(this);
+            $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+            $pb.progressbar();
+        });
+    });
+
+    // Reset
+    $('#v-bottom-basic-reset').click(function() {
+        $('#v-bottom-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
+    });
+
+
+
+    // Vertical progress bar with text fill
+    // ------------------------------
+
+    // Start
+    $('#v-fill-basic-start').click(function() {
+        $('#v-fill-basic .progress-bar').each(function () {
+            var $pb = $(this);
+            $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+            $pb.progressbar({display_text: 'fill'});
+        });
+    });
+
+    // Reset
+    $('#v-fill-basic-reset').click(function() {
+        $('#v-fill-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
+    });
+
+
+
+    // Vertical progress bar with non-percentage text
+    // ------------------------------
+
+    // Start
+    $('#v-fill-nonpercentage-basic-start').click(function() {
+        $('#v-fill-nonpercentage-basic .progress-bar').each(function () {
+            var $pb = $(this);
+            $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+            $pb.progressbar({display_text: 'fill', use_percentage: false});
+        });
+    });
+
+    // Reset
+    $('#v-fill-nonpercentage-basic-reset').click(function() {
+        $('#v-fill-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
+    });
+
+
+
+    // Vertical progress bar with centered text
+    // ------------------------------
+
+    // Start
+    $('#v-center-basic-start').click(function() {
+        $('#v-center-basic .progress-bar').each(function () {
+            var $pb = $(this);
+            $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+            $pb.progressbar({display_text: 'center'});
+        });
+    });
+
+    // Reset
+    $('#v-center-basic-reset').click(function() {
+        $('#v-center-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
+    });
+
+
+
+    // Vertical progress bar with centered non-percentage text
+    // ------------------------------
+
+    // Start
+    $('#v-center-nonpercentage-basic-start').click(function() {
+        $('#v-center-nonpercentage-basic .progress-bar').each(function () {
+            var $pb = $(this);
+            $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+            $pb.progressbar({display_text: 'center', use_percentage: false});
+        });
+    });
+
+    // Reset
+    $('#v-center-nonpercentage-basic-reset').click(function() {
+        $('#v-center-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
+    });
+
+
+
+
+    // ========================================
+    //
+    // Loading spinners
+    //
+    // ========================================
+
+
+    // Spinner #1
+    // ------------------------------
+
+    // Light
+    $('#spinner-light').on('click', function() {
+        var light = $(this).parent();
+        $(light).block({
+            message: '<i class="icon-spinner spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark').on('click', function() {
+        var dark = $(this).parent();
+        $(dark).block({
+            message: '<i class="icon-spinner spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark).unblock();
+        }, 2000);
+    });
+
+
+
+    // Spinner #2
+    // ------------------------------
+
+    // Light
+    $('#spinner-light-2').on('click', function() {
+        var light_2 = $(this).parent();
+        $(light_2).block({
+            message: '<i class="icon-spinner2 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light_2).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark-2').on('click', function() {
+        var dark_2 = $(this).parent();
+        $(dark_2).block({
+            message: '<i class="icon-spinner2 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark_2).unblock();
+        }, 2000);
+    });
+
+
+
+    // Spinner #3
+    // ------------------------------
+
+    // Light
+    $('#spinner-light-3').on('click', function() {
+        var light_3 = $(this).parent();
+        $(light_3).block({
+            message: '<i class="icon-spinner3 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light_3).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark-3').on('click', function() {
+        var dark_3 = $(this).parent();
+        $(dark_3).block({
+            message: '<i class="icon-spinner3 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark_3).unblock();
+        }, 2000);
+    });
+
+
+
+    // Spinner #4
+    // ------------------------------
+
+    // Light
+    $('#spinner-light-4').on('click', function() {
+        var light_4 = $(this).parent();
+        $(light_4).block({
+            message: '<i class="icon-spinner4 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light_4).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark-4').on('click', function() {
+        var dark_4 = $(this).parent();
+        $(dark_4).block({
+            message: '<i class="icon-spinner4 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark_4).unblock();
+        }, 2000);
+    });
+
+
+
+    // Spinner #5
+    // ------------------------------
+
+    // Light
+    $('#spinner-light-5').on('click', function() {
+        var light_5 = $(this).parent();
+        $(light_5).block({
+            message: '<i class="icon-spinner6 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light_5).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark-5').on('click', function() {
+        var dark_5 = $(this).parent();
+        $(dark_5).block({
+            message: '<i class="icon-spinner6 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark_5).unblock();
+        }, 2000);
+    });
+
+
+
+    // Spinner #6
+    // ------------------------------
+
+    // Light
+    $('#spinner-light-6').on('click', function() {
+        var light_6 = $(this).parent();
+        $(light_6).block({
+            message: '<i class="icon-spinner9 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light_6).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark-6').on('click', function() {
+        var dark_6 = $(this).parent();
+        $(dark_6).block({
+            message: '<i class="icon-spinner9 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark_6).unblock();
+        }, 2000);
+    });
+
+
+
+    // Spinner #7
+    // ------------------------------
+
+    // Light
+    $('#spinner-light-7').on('click', function() {
+        var light_7 = $(this).parent();
+        $(light_7).block({
+            message: '<i class="icon-spinner10 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light_7).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark-7').on('click', function() {
+        var dark_7 = $(this).parent();
+        $(dark_7).block({
+            message: '<i class="icon-spinner10 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark_7).unblock();
+        }, 2000);
+    });
+
+
+
+    // Spinner #8
+    // ------------------------------
+
+    // Light
+    $('#spinner-light-8').on('click', function() {
+        var light_8 = $(this).parent();
+        $(light_8).block({
+            message: '<i class="icon-spinner11 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light_8).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark-8').on('click', function() {
+        var dark_8 = $(this).parent();
+        $(dark_8).block({
+            message: '<i class="icon-spinner11 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark_8).unblock();
+        }, 2000);
+    });
+
+
+
+    // Spinner #9
+    // ------------------------------
+
+    // Light
+    $('#spinner-light-9').on('click', function() {
+        var light_9 = $(this).parent();
+        $(light_9).block({
+            message: '<i class="icon-sync spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none'
+            }
+        });
+        window.setTimeout(function () {
+            $(light_9).unblock();
+        }, 2000);
+    });
+
+    // Dark
+    $('#spinner-dark-9').on('click', function() {
+        var dark_9 = $(this).parent();
+        $(dark_9).block({
+            message: '<i class="icon-sync spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1B2024',
+                opacity: 0.85,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'none',
+                color: '#fff'
+            }
+        });
+        window.setTimeout(function () {
+            $(dark_9).unblock();
+        }, 2000);
+    });
+
+});

assets/js/pages/components_media.js

@@ -0,0 +1,27 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Media objects and lists
+*
+*  Specific JS code additions for components_media.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Switchery toggles
+	var elems = Array.prototype.slice.call(document.querySelectorAll('.switch'));
+
+	elems.forEach(function(html) {
+		var switchery = new Switchery(html);
+	});
+
+
+    // Styled checkboxes/radios
+	$(".styled").uniform({
+		radioClass: 'choice'
+    });
+
+});

assets/js/pages/components_modals.js

@@ -0,0 +1,352 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Modal dialogs and extensions
+*
+*  Specific JS code additions for components_modals.html page
+*
+*  Version: 1.1
+*  Latest update: Jul 5, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Basic modals
+    // ------------------------------
+
+    // Load remote content
+    $('#modal_remote').on('show.bs.modal', function() {
+        $(this).find('.modal-body').load('assets/demo_data/wizard/education.html', function() {
+
+            // Init Select2 when loaded
+            $('.select').select2({
+                minimumResultsForSearch: Infinity
+            });
+        });
+    });
+
+
+    // Bootbox extension
+    // ------------------------------
+
+    // Alert dialog
+    $('#alert').on('click', function() {
+        bootbox.alert("Native alert dialog has been replaced with Bootbox alert box.");
+    });
+
+    // Confirmation dialog
+    $('#confirm').on('click', function() {
+        bootbox.confirm("Native confirm dialog has been replaced with Bootbox confirm box.", function(result) {
+            bootbox.alert("Confirm result: " + result)
+        });
+    });
+
+    // Prompt dialog
+    $('#prompt').on('click', function() {
+        bootbox.prompt("Please enter your name", function(result) {
+            if (result === null) {                                             
+                bootbox.alert("Prompt dismissed");                              
+            } else {
+                bootbox.alert("Hi <b>"+result+"</b>");                          
+            }
+        });
+    });
+
+    // Prompt dialog with default value
+    $('#prompt_value').on('click', function() {
+        bootbox.prompt({
+            title: "What is your real name?",
+            value: "Eugene Kopyov",
+            callback: function(result) {
+                if (result === null) {
+                    bootbox.alert("Prompt dismissed");
+                }
+                else {
+                    bootbox.alert("Hi, <b>"+result+"</b>");
+                }
+            }
+        });
+    });
+
+    // Custom bootbox dialog
+    $('#bootbox_custom').on('click', function() {
+        bootbox.dialog({
+            message: "I am a custom dialog",
+            title: "Custom title",
+            buttons: {
+                success: {
+                    label: "Success!",
+                    className: "btn-success",
+                    callback: function() {
+                        bootbox.alert("great success");
+                    }
+                },
+                danger: {
+                    label: "Danger!",
+                    className: "btn-danger",
+                    callback: function() {
+                        bootbox.alert("uh oh, look out!");
+                    }
+                },
+                main: {
+                    label: "Click ME!",
+                    className: "btn-primary",
+                    callback: function() {
+                        bootbox.alert("Primary button");
+                    }
+                }
+            }
+        });
+    });
+
+    // Custom bootbox dialog with form
+    $('#bootbox_form').on('click', function() {
+        bootbox.dialog({
+                title: "This is a form in a modal.",
+                message: '<div class="row">  ' +
+                    '<div class="col-md-12">' +
+                        '<form class="form-horizontal">' +
+                            '<div class="form-group">' +
+                                '<label class="col-md-4 control-label">Name</label>' +
+                                '<div class="col-md-8">' +
+                                    '<input id="name" name="name" type="text" placeholder="Your name" class="form-control">' +
+                                    '<span class="help-block">Here goes your name</span>' +
+                                '</div>' +
+                            '</div>' +
+                            '<div class="form-group">' +
+                                '<label class="col-md-4 control-label">How awesome is this?</label>' +
+                                '<div class="col-md-8">' +
+                                    '<div class="radio">' +
+                                        '<label>' +
+                                            '<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked">' +
+                                            'Really awesomeness' +
+                                        '</label>' +
+                                    '</div>' +
+                                    '<div class="radio">' +
+                                        '<label>' +
+                                            '<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome">' +
+                                            'Super awesome' +
+                                        '</label>' +
+                                    '</div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</form>' +
+                    '</div>' +
+                    '</div>',
+                buttons: {
+                    success: {
+                        label: "Save",
+                        className: "btn-success",
+                        callback: function () {
+                            var name = $('#name').val();
+                            var answer = $("input[name='awesomeness']:checked").val()
+                            bootbox.alert("Hello " + name + ". You've chosen <b>" + answer + "</b>");
+                        }
+                    }
+                }
+            }
+        );
+    });
+
+
+    // Modal callbacks
+    // ------------------------------
+
+    // onShow callback
+    $('#onshow_callback').on('click', function() {
+        $('#modal_default').on('show.bs.modal', function() {
+            alert('onShow callback fired.')
+        });
+    });
+
+    // onShown callback
+    $('#onshown_callback').on('click', function() {
+        $('#modal_form_vertical').on('shown.bs.modal', function() {
+            alert('onShown callback fired.')
+        });
+    });
+
+    // onHide callback
+    $('#onhide_callback').on('click', function() {
+        $('#modal_subtitle').on('hide.bs.modal', function() {
+            alert('onHide callback fired.')
+        });
+    });
+
+    // onHidden callback
+    $('#onhidden_callback').on('click', function() {
+        $('#modal_theme_success').on('hidden.bs.modal', function() {
+            alert('onHidden callback fired.')
+        });
+    });
+    
+
+    // Sweet Alert extension
+    // ------------------------------
+
+    // Basic
+    $('#sweet_basic').on('click', function() {
+        swal({
+            title: "Here's a message!",
+            confirmButtonColor: "#2196F3"
+        });
+    });
+
+    // With title
+    $('#sweet_title_text').on('click', function() {
+        swal({
+            title: "Here's a message!",
+            text: "It's pretty, isn't it?",
+            confirmButtonColor: "#2196F3"
+        });
+    });
+
+    // Auto closing
+    $('#sweet_auto_closer').on('click', function() {
+        swal({
+            title: "Auto close alert!",
+            text: "I will close in 2 seconds.",
+            confirmButtonColor: "#2196F3",
+            timer: 2000
+        });
+    });
+
+    // HTML message
+    $('#sweet_html').on('click', function() {
+        swal({
+            title: "HTML <small>small subtitle</small>",
+            text: "A custom <span style='color:#F8BB86'>html<span> message.",
+            html: true,
+            confirmButtonColor: "#2196F3"
+        });
+    });
+
+    // Prompt
+    $('#sweet_prompt').on('click', function() {
+        swal({
+            title: "An input!",
+            text: "Write something interesting:",
+            type: "input",
+            showCancelButton: true,
+            confirmButtonColor: "#2196F3",
+            closeOnConfirm: false,
+            animation: "slide-from-top",
+            inputPlaceholder: "Write something"
+        },
+        function(inputValue){
+            if (inputValue === false) return false;
+            if (inputValue === "") {
+                swal.showInputError("You need to write something!");
+                return false
+            }
+            swal({
+                title: "Nice!",
+                text: "You wrote: " + inputValue,
+                type: "success",
+                confirmButtonColor: "#2196F3"
+            });
+        });
+    });
+
+    // AJAX loader
+    $('#sweet_loader').on('click', function() {
+        swal({
+            title: "Ajax request example",
+            text: "Submit to run ajax request",
+            type: "info",
+            showCancelButton: true,
+            closeOnConfirm: false,
+            confirmButtonColor: "#2196F3",
+            showLoaderOnConfirm: true
+        },
+        function() {
+            setTimeout(function() {
+                swal({
+                    title: "Ajax request finished!",
+                    confirmButtonColor: "#2196F3"
+                });
+            }, 2000);
+        });
+    });
+
+
+    //
+    // Contextual alerts
+    //
+    
+    // Success alert
+    $('#sweet_success').on('click', function() {
+        swal({
+            title: "Good job!",
+            text: "You clicked the button!",
+            confirmButtonColor: "#66BB6A",
+            type: "success"
+        });
+    });
+
+    // Error alert
+    $('#sweet_error').on('click', function() {
+        swal({
+            title: "Oops...",
+            text: "Something went wrong!",
+            confirmButtonColor: "#EF5350",
+            type: "error"
+        });
+    });
+
+    // Warning alert
+    $('#sweet_warning').on('click', function() {
+        swal({
+            title: "Are you sure?",
+            text: "You will not be able to recover this imaginary file!",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#FF7043",
+            confirmButtonText: "Yes, delete it!"
+        });
+    });
+
+    // Info alert
+    $('#sweet_info').on('click', function() {
+        swal({
+            title: "For your information",
+            text: "This is some sort of a custom alert",
+            confirmButtonColor: "#2196F3",
+            type: "info"
+        });
+    });
+
+    // Alert combination
+    $('#sweet_combine').on('click', function() {
+        swal({
+            title: "Are you sure?",
+            text: "You will not be able to recover this imaginary file!",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#EF5350",
+            confirmButtonText: "Yes, delete it!",
+            cancelButtonText: "No, cancel pls!",
+            closeOnConfirm: false,
+            closeOnCancel: false
+        },
+        function(isConfirm){
+            if (isConfirm) {
+                swal({
+                    title: "Deleted!",
+                    text: "Your imaginary file has been deleted.",
+                    confirmButtonColor: "#66BB6A",
+                    type: "success"
+                });
+            }
+            else {
+                swal({
+                    title: "Cancelled",
+                    text: "Your imaginary file is safe :)",
+                    confirmButtonColor: "#2196F3",
+                    type: "error"
+                });
+            }
+        });
+    });
+});

assets/js/pages/components_navs.js

@@ -0,0 +1,51 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Collapsible, accordion and other navs
+*
+*  Specific JS code additions for components_navs.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Accordion component sorting
+    $(".accordion-sortable").sortable({
+        connectWith: '.accordion-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Collapsible component sorting
+    $(".collapsible-sortable").sortable({
+        connectWith: '.collapsible-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+});

assets/js/pages/components_notifications_other.js

@@ -0,0 +1,331 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Noty and jGrowl notifications
+*
+*  Specific JS code additions for components_notifications_other.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Noty plugin
+    // ------------------------------
+
+    var notes = [];
+
+    // Text options
+    notes['alert'] = 'Best check yo self, you\'re not looking too good.';
+    notes['error'] = 'Change a few things up and try submitting again.';
+    notes['success'] = 'You successfully read this important alert message.';
+    notes['information'] = 'This alert needs your attention, but it\'s not super important.';
+    notes['warning'] = 'Warning! Best check yo self, you\'re not looking too good.';
+    notes['confirm'] = 'Do you want to continue?';
+
+    // Initialize
+    $('.noty-runner').click(function () {
+        var self = $(this);
+        noty({
+            width: 200,
+            text: notes[self.data('type')],
+            type: self.data('type'),
+            dismissQueue: true,
+            timeout: 4000,
+            layout: self.data('layout'),
+            buttons: (self.data('type') != 'confirm') ? false : [
+                {
+                    addClass: 'btn btn-primary btn-xs',
+                    text: 'Ok',
+                    onClick: function ($noty) { //this = button element, $noty = $noty element
+                        $noty.close();
+                        noty({
+                            force: true,
+                            text: 'You clicked "Ok" button',
+                            type: 'success',
+                            layout: self.data('layout')
+                        });
+                    }
+                },
+                {
+                    addClass: 'btn btn-danger btn-xs',
+                    text: 'Cancel',
+                    onClick: function ($noty) {
+                        $noty.close();
+                        noty({
+                            force: true,
+                            text: 'You clicked "Cancel" button',
+                            type: 'error',
+                            layout: self.data('layout')
+                        });
+                    }
+                }
+            ]
+        });
+        return false;
+    });
+
+
+
+    // jGrowl plugin
+    // ------------------------------
+
+    // Defaults override - hide "close all" button
+    $.jGrowl.defaults.closer = false;
+
+
+    //
+    // Contextual options
+    //
+
+    // Solid color theme
+    $('#jgrowl-default').on('click', function () {
+        $.jGrowl('We are glad to see you again', {
+            header: 'Good morning!',
+            theme: 'bg-primary'
+        });
+    });
+
+    // Danger notification
+    $('#jgrowl-danger').on('click', function () {
+        $.jGrowl('Change a few things up and try submitting again', {
+            header: 'Oh snap!',
+            theme: 'bg-danger'
+        });
+    });
+
+    // Success notification
+    $('#jgrowl-success').on('click', function () {
+        $.jGrowl('You successfully read this important alert message', {
+            header: 'Well done!',
+            theme: 'bg-success'
+        });
+    });
+
+    // Warning notification
+    $('#jgrowl-warning').on('click', function () {
+        $.jGrowl('Better check yourself, you\'re not looking too good', {
+            header: 'Attention Here!',
+            theme: 'bg-warning'
+        });
+    });
+
+    // Info notification
+    $('#jgrowl-info').on('click', function () {
+        $.jGrowl('This alert needs your attention, but it\'s not super important.', {
+            header: 'Heads up!',
+            theme: 'bg-info'
+        });
+    });
+
+
+
+    //
+    // Notification styling
+    //
+
+    // Solid left
+    $('#jgrowl-solid-styled-left').on('click', function () {
+        $.jGrowl('Solid color notification with left icon', {
+            header: 'Left icon',
+            theme: 'alert-styled-left bg-danger'
+        });
+    });
+
+    // Solid right
+    $('#jgrowl-solid-styled-right').on('click', function () {
+        $.jGrowl('Solid color notification with right icon', {
+            header: 'Right icon',
+            theme: 'alert-styled-right bg-info'
+        });
+    });
+
+    // Solid custom
+    $('#jgrowl-solid-custom-styled').on('click', function () {
+        $.jGrowl('Notification with custom colors', {
+            header: 'Custom styling',
+            theme: 'bg-teal alert-styled-left alert-styled-custom'
+        });
+    });
+
+
+    // Styled left
+    $('#jgrowl-styled-left').on('click', function () {
+        $.jGrowl('Notification with left contextual icon', {
+            header: 'Left icon',
+            theme: 'alert-bordered alert-styled-left alert-danger'
+        });
+    });
+
+    // Styled right
+    $('#jgrowl-styled-right').on('click', function () {
+        $.jGrowl('Notification with right contextual icon', {
+            header: 'Right icon',
+            theme: 'alert-bordered alert-styled-right alert-danger'
+        });
+    });
+
+    // Custom style
+    $('#jgrowl-custom-styled').on('click', function () {
+        $.jGrowl('Notification with custom style', {
+            header: 'Custom style',
+            theme: 'alert-styled-left alert-styled-custom alpha-teal text-teal-900'
+        });
+    });
+
+    // Styled with arrow
+    $('#jgrowl-styled-arrow').on('click', function () {
+        $.jGrowl('Styled alert with arrow', {
+            header: 'Styled with arrow',
+            theme: 'alert-styled-left alert-arrow-left alert-primary'
+        });
+    });
+
+
+    // Rounded
+    $('#jgrowl-rounded').on('click', function () {
+        $.jGrowl('Alert with rounded corners', {
+            theme: 'bg-primary alert-rounded'
+        });
+    });
+
+    // Basic style
+    $('#jgrowl-alert-default').on('click', function () {
+        $.jGrowl('Default alert style example', {
+            header: 'Default alert style',
+            theme: 'alert-bordered alert-primary'
+        });
+    });
+
+
+
+    //
+    // Options
+    //
+
+    // Sticky notification
+    $('#jgrowl-sticky').on('click', function () {
+        $.jGrowl('I am a sticky message', {
+            header: 'Sticky message',
+            sticky: true,
+            theme: 'bg-slate-600'
+        });
+    });
+
+    // Long life message
+    $('#jgrowl-long-life').on('click', function () {
+        $.jGrowl('A message that will live a little longer.', {
+            header: 'Long life message',
+            life: 10000,
+            theme: 'bg-slate-600'
+        });
+    });
+
+    // Callbacks
+    $('#jgrowl-callbacks').on('click', function () {
+        $.jGrowl('Check out your console', {
+            theme: 'bg-slate-600',
+            life: 5000,
+            header: 'Callbacks',
+            beforeOpen: function(e,m,o) {
+                console.log("I am going to be opened!", this);
+            },
+            afterOpen: function(e,m,o) {
+                console.log("I am opened!", this);
+            },
+            close: function(e,m,o) {
+                console.log("I am closed!", this);
+            }
+        });
+    });
+
+    // Animation options
+    $('#jgrowl-animation').on('click', function () {
+        $.jGrowl('I am a notice!', {
+            speed: 100,
+            theme: 'bg-danger',
+            header: 'Fast animation speed'
+        });
+    });
+
+
+
+    //
+    // Positions
+    //
+
+    // Top left
+    $('#jgrowl-top-left').on('click', function () {
+        $('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
+        $.jGrowl('I am a jGrowl notice!', {
+            position: 'top-left',
+            theme: 'bg-teal',
+            header: 'Top Left position'
+        });
+    });
+
+    // Top center
+    $('#jgrowl-top-center').on('click', function () {
+        $('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
+        $.jGrowl('I am a jGrowl notice!', {
+            position: 'top-center',
+            theme: 'bg-teal',
+            header: 'Top Center position'
+        });
+    });
+
+    // Top right
+    $('#jgrowl-top-right').on('click', function () {
+        $('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
+        $.jGrowl('I am a jGrowl notice!', {
+            position: 'top-right',
+            theme: 'bg-teal',
+            header: 'Top Right position'
+        });
+    });
+
+
+    // Center
+    $('#jgrowl-center').on('click', function () {
+        $('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
+        $.jGrowl('I am a jGrowl notice!', {
+            position: 'center',
+            theme: 'bg-danger',
+            header: 'Center position'
+        });
+    });
+
+
+    // Bottom left
+    $('#jgrowl-bottom-left').on('click', function () {
+        $('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
+        $.jGrowl('I am a jGrowl notice!', {
+            position: 'bottom-left',
+            theme: 'bg-info',
+            header: 'Bottom Left position'
+        });
+    });
+
+    // Bottom right
+    $('#jgrowl-bottom-right').on('click', function () {
+        $('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
+        $.jGrowl('I am a jGrowl notice!', {
+            position: 'bottom-right',
+            theme: 'bg-info',
+            header: 'Bottom Right position'
+        });
+    });
+
+    // Bottom center
+    $('#jgrowl-bottom-center').on('click', function () {
+        $('body').find('.jGrowl').attr('class', '').attr('id', '').hide();
+        $.jGrowl('I am a jGrowl notice!', {
+            position: 'bottom-center',
+            theme: 'bg-info',
+            header: 'Bottom Center position'
+        });
+    });
+    
+});

assets/js/pages/components_page_header.js

@@ -0,0 +1,145 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Page header component
+*
+*  Specific JS code additions for components_page_header.html page
+*
+*  Version: 1.1
+*  Latest update: Nov 25, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Date range pickers
+    // ------------------------------
+
+    //
+    // Custom display
+    //
+
+    // Setup
+    $('#reportrange').daterangepicker(
+        {
+            startDate: moment().subtract(29, 'days'),
+            endDate: moment(),
+            minDate: '01/01/2014',
+            maxDate: '12/31/2016',
+            dateLimit: {
+                days: 60
+            },
+            ranges: {
+                'Today': [moment(), moment()],
+                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+                'This Month': [moment().startOf('month'), moment().endOf('month')],
+                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+            },
+            opens: 'left',
+            buttonClasses: ['btn'],
+            applyClass: 'btn-small btn-info btn-block',
+            cancelClass: 'btn-small btn-default btn-block',
+            separator: ' to ',
+            locale: {
+                applyLabel: 'Submit',
+                fromLabel: 'From',
+                toLabel: 'To',
+                customRangeLabel: 'Custom Range',
+                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
+                monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+                firstDay: 1
+            }
+        },
+        function(start, end) {
+
+            // Format date
+            $('#reportrange .daterange-custom-display').html(start.format('<i>D</i> <b><i>MMM</i> <i>YYYY</i></b>') + '<em>&#8211;</em>' + end.format('<i>D</i> <b><i>MMM</i> <i>YYYY</i></b>'));
+        }
+    );
+
+    // Format date
+    $('#reportrange .daterange-custom-display').html(moment().subtract(29, 'days').format('<i>D</i> <b><i>MMM</i> <i>YYYY</i></b>') + '<em>&#8211;</em>' + moment().format('<i>D</i> <b><i>MMM</i> <i>YYYY</i></b>'));
+
+
+    //
+    // As a button
+    //
+
+    // Setup
+    $('.daterange-ranges').daterangepicker(
+        {
+            startDate: moment().subtract(29, 'days'),
+            endDate: moment(),
+            minDate: '01/01/2014',
+            maxDate: '12/31/2016',
+            dateLimit: { days: 60 },
+            ranges: {
+                'Today': [moment(), moment()],
+                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+                'This Month': [moment().startOf('month'), moment().endOf('month')],
+                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+            },
+            opens: 'left',
+            applyClass: 'btn-small btn-primary btn-block',
+            cancelClass: 'btn-small btn-default btn-block'
+            //format: 'MM/DD/YYYY'
+        },
+        function(start, end) {
+
+            // Format date
+            $('.daterange-ranges span').html(end.format('MMM D, YYYY') + ' - ' + start.format('MMM D, YYYY'));
+        }
+    );
+
+    // Format date
+    $('.daterange-ranges span').html(moment().format('MMM D, YYYY') + ' - ' + moment().subtract(29, 'days').format('MMM D, YYYY'));
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Select2 selects
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 220
+    });
+
+
+    // Bootstrap multiselect
+    $('.multiselect').multiselect({
+        dropRight: true,
+        buttonClass: 'btn btn-default'
+    });
+
+
+    // Switchery toggles
+    if (Array.prototype.forEach) {
+        var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
+
+        elems.forEach(function(html) {
+            var switchery = new Switchery(html);
+        });
+    }
+    else {
+        var elems = document.querySelectorAll('.switchery');
+
+        for (var i = 0; i < elems.length; i++) {
+            var switchery = new Switchery(elems[i]);
+        }
+    }
+
+
+    // Styled checkboxes/radios
+    $(".styled, .multiselect-container input").uniform({ radioClass: 'choice'});
+
+
+    // Styled file input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-warning-400 btn-icon',
+        fileButtonHtml: '<i class="icon-upload"></i>'
+    });
+});

assets/js/pages/components_pagination.js

@@ -0,0 +1,216 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Pagination component
+*
+*  Specific JS code additions for components_pagination.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Bootpag dynamic pagination
+    // ------------------------------
+
+    // Basic
+    $('.bootpag-default').bootpag({
+        total: 20,
+        maxVisible: 6,
+        leaps: false
+        }).on("page", function(event, num){
+            $(".content-default").html("Page " + num); // or some ajax content loading...
+    }).children('.pagination').addClass('pagination-sm');
+
+
+    // Flat style
+    $('.bootpag-flat').bootpag({
+        total: 20,
+        maxVisible: 6,
+        leaps: false
+        }).on("page", function(event, num){
+            $(".content-flat").html("Page " + num); // or some ajax content loading...
+    }).children('.pagination').addClass('pagination-flat pagination-sm');
+
+
+    // Separated style
+    $('.bootpag-separated').bootpag({
+        total: 20,
+        maxVisible: 6,
+        leaps: false
+        }).on("page", function(event, num){
+            $(".content-separated").html("Page " + num); // or some ajax content loading...
+    }).children('.pagination').addClass('pagination-separated pagination-sm');
+
+
+    // Custom button text
+    $('.bootpag-prev-next').bootpag({
+        total: 10,
+        maxVisible: 5,
+        leaps: false,
+        prev: 'prev',
+        next: 'next'
+        }).on("page", function(event, num){
+            $(".content-prev-next").html("Page " + num); // or some ajax content loading...
+    }).children('.pagination').addClass('pagination-flat pagination-sm');
+
+
+    // Custom start page
+    $('.bootpag-page-start').bootpag({
+        total: 10,
+        maxVisible: 6,
+        page: 3,
+        leaps: false
+        }).on("page", function(event, num){
+            $(".content-page-start").html("Page " + num); // or some ajax content loading...
+    }).children('.pagination').addClass('pagination-flat pagination-sm');
+
+
+    // Callback
+    $('.bootpag-callback').bootpag({
+        total: 10,
+        maxVisible: 6,
+        leaps: false
+        }).on("page", function(event, num){
+            $(".content-callback").html("Page " + num); // or some ajax content loading...
+            alert('You have clicked page #' + num);
+    }).children('.pagination').addClass('pagination-flat pagination-sm');
+
+
+
+    // TWBS dynamic pagination
+    // ------------------------------
+
+    // Basic
+    $('.twbs-default').twbsPagination({
+        totalPages: 35,
+        visiblePages: 4,
+        prev: 'Prev',
+        first: null,
+        last: null,
+        onPageClick: function (event, page) {
+            $('.twbs-content-default').text('Page ' + page);
+        }
+    });
+
+
+    // Flat style
+    $('.twbs-flat').twbsPagination({
+        totalPages: 35,
+        visiblePages: 4,
+        prev: 'Prev',
+        first: null,
+        last: null,
+        onPageClick: function (event, page) {
+            $('.twbs-content-flat').text('Page ' + page);
+        }
+    });
+
+
+    // Separated style
+    $('.twbs-separated').twbsPagination({
+        totalPages: 35,
+        visiblePages: 4,
+        prev: 'Prev',
+        first: null,
+        last: null,
+        onPageClick: function (event, page) {
+            $('.twbs-content-separated').text('Page ' + page);
+        }
+    });
+
+
+    // Custom button text
+    $('.twbs-prev-next').twbsPagination({
+        totalPages: 35,
+        visiblePages: 4,
+        prev: '⇠',
+        next: '⇢',
+        first: '⇤',
+        last: '⇥',
+        onPageClick: function (event, page) {
+            $('.twbs-content-prev-next').text('Page ' + page);
+        }
+    });
+
+
+    // Custom start page
+    $('.twbs-page-start').twbsPagination({
+        totalPages: 35,
+        visiblePages: 4,
+        startPage: 3,
+        prev: 'Prev',
+        first: null,
+        last: null,
+        onPageClick: function (event, page) {
+            $('.twbs-content-page-start').text('Page ' + page);
+        }
+    });
+
+
+    // Set number of visible pages
+    $('.twbs-visible-pages').twbsPagination({
+        totalPages: 35,
+        visiblePages: 4,
+        prev: '←',
+        next: '→',
+        first: null,
+        last: null,
+        onPageClick: function (event, page) {
+            $('.twbs-content-visible-pages').text('Page ' + page);
+        }
+    });
+
+
+
+    // Date paginator
+    // ------------------------------
+
+    // Basic
+    $('.datepaginator-default').datepaginator({
+        itemWidth: 70,
+        navItemWidth: 28
+    });
+
+
+    // Days format
+    $('.datepaginator-days-format').datepaginator({
+        itemWidth: 70,
+        navItemWidth: 28,
+        text: 'dddd<br/>Do'
+    });
+
+
+    // Hide calendar
+    $('.datepaginator-calendar').datepaginator({
+        itemWidth: 70,
+        navItemWidth: 28,
+        showCalendar: false
+    });
+
+
+    // Highlight selected date
+    $('.datepaginator-highlight-selected').datepaginator({
+        itemWidth: 70,
+        navItemWidth: 28,
+        highlightSelectedDate: false
+    });
+
+
+    // Highlight today's date
+    $('.datepaginator-highlight-today').datepaginator({
+        itemWidth: 70,
+        navItemWidth: 28,
+        highlightToday: false
+    });
+
+
+    // Custom item width
+    $('.datepaginator-item-width').datepaginator({
+        itemWidth: 50,
+        navItemWidth: 28
+    });
+
+});

assets/js/pages/components_popups.js

@@ -0,0 +1,177 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Tooltips and popovers
+*
+*  Specific JS code additions for components_popups.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Tooltips
+    // ------------------------------
+
+	// Custom color
+	$('[data-popup=tooltip-custom]').tooltip({
+		template: '<div class="tooltip"><div class="bg-teal"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+	});
+
+
+	//
+	// Tooltip events
+	//
+
+	// onShow event
+	$('#tooltip-show').tooltip({
+		title: 'I am a tooltip',
+		trigger: 'click'
+	}).on('show.bs.tooltip', function() {
+		alert('Show event fired.')
+	});
+
+	// onShown event
+	$('#tooltip-shown').tooltip({
+		title: 'I am a tooltip',
+		trigger: 'click'
+	}).on('shown.bs.tooltip', function() {
+		alert('Shown event fired.')
+	});
+
+	// onHide event
+	$('#tooltip-hide').tooltip({
+		title: 'I am a tooltip',
+		trigger: 'click'
+	}).on('hide.bs.tooltip', function() {
+		alert('Hide event fired.')
+	});
+
+	// onHidden event
+	$('#tooltip-hidden').tooltip({
+		title: 'I am a tooltip',
+		trigger: 'click'
+	}).on('hidden.bs.tooltip', function() {
+		alert('Hidden event fired.')
+	});
+
+
+	//
+	// Tooltip methods
+	//
+
+	// Show method
+	$('#show-tooltip-method').on('click', function() {
+		$('#show-tooltip-method-target').tooltip('show')
+	});
+
+	// Hide method
+	$('#hide-tooltip-method-target').on('mouseenter', function() {
+		$(this).tooltip('show')
+	});
+	$('#hide-tooltip-method').on('click', function() {
+		$('#hide-tooltip-method-target').tooltip('hide')
+	});
+
+	// Toggle method
+	$('#toggle-tooltip-method').on('click', function() {
+		$('#toggle-tooltip-method-target').tooltip('toggle')
+	})
+
+	// Destroy method
+	$('#destroy-tooltip-method').on('click', function() {
+		$('#destroy-tooltip-method-target').tooltip('destroy')
+	});
+
+
+
+    // Popovers
+    // ------------------------------
+
+	//
+	// Styling
+	//
+
+	// Custom color
+	$('[data-popup=popover-custom]').popover({
+		template: '<div class="popover border-teal-400"><div class="arrow"></div><h3 class="popover-title bg-teal-400"></h3><div class="popover-content"></div></div>'
+	});
+
+	// Custom solid color
+	$('[data-popup=popover-solid]').popover({
+		template: '<div class="popover bg-primary"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+	});
+
+
+	//
+	// Popover events
+	//
+
+	// onShow event
+	$('#popover-show').popover({
+		title: 'Popover title',
+		content: 'And here\'s some amazing content. It\'s very engaging. Right?',
+		trigger: 'click'
+	}).on('show.bs.popover', function() {
+		alert('Show event fired.')
+	});
+
+	// onShown event
+	$('#popover-shown').popover({
+		title: 'Popover title',
+		content: 'And here\'s some amazing content. It\'s very engaging. Right?',
+		trigger: 'click'
+	}).on('shown.bs.popover', function() {
+		alert('Shown event fired.')
+	});
+
+	// onHide event
+	$('#popover-hide').popover({
+		title: 'Popover title',
+		content: 'And here\'s some amazing content. It\'s very engaging. Right?',
+		placement: 'top',
+		trigger: 'click'
+	}).on('hide.bs.popover', function() {
+		alert('Hide event fired.')
+	});
+
+	// onHidden event
+	$('#popover-hidden').popover({
+		title: 'Popover title',
+		content: 'And here\'s some amazing content. It\'s very engaging. Right?',
+		trigger: 'click'
+	}).on('hidden.bs.popover', function() {
+		alert('Hidden event fired.')
+	});
+
+
+	//
+	// Popover methods
+	//
+
+	// Show method
+	$('#show-popover-method').on('click', function() {
+		$('#show-popover-method-target').popover('show')
+	})
+
+	// Hide method
+	$('#hide-popover-method-target').on('mouseenter', function() {
+		$(this).popover('show')
+	});
+	$('#hide-popover-method').on('click', function() {
+		$('#hide-popover-method-target').popover('hide')
+	});
+
+	// Toggle method
+	$('#toggle-popover-method').on('click', function() {
+		$('#toggle-popover-method-target').popover('toggle')
+	})
+
+	// Destroy method
+	$('#destroy-popover-method').on('click', function() {
+		$('#destroy-popover-method-target').popover('destroy')
+	});
+	
+});

assets/js/pages/components_sliders.js

@@ -0,0 +1,734 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Sliders
+*
+*  Specific JS code additions for components_sliders.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // jQuery UI sliders
+    // ------------------------------
+
+    //
+    // Horizontal sliders
+    //
+
+    // Basic slider
+    $( ".ui-slider" ).slider();
+
+
+    // Custom start value
+    $( ".ui-slider-value" ).slider({
+        value: 20,
+        min: 0,
+        max: 40
+    });
+
+
+    // Snap to increments
+    $( ".ui-slider-increments" ).slider({
+        value:100,
+        min: 0,
+        max: 500,
+        step: 50
+    });
+
+
+    // Range slider
+    $( ".ui-slider-range" ).slider({
+        range: true,
+        min: 0,
+        max: 60,
+        values: [ 10, 50 ]
+    });
+
+
+    // Fixed minimum
+    $( ".ui-slider-range-min" ).slider({
+        range: "min",
+        value: 37,
+        min: 1,
+        max: 700,
+        slide: function( event, ui ) {
+            $( "#amount" ).val( "$" + ui.value );
+        }
+    });
+    $( "#amount" ).val( "$" + $( ".ui-slider-range-min" ).slider( "value" ) );
+
+
+    // Fixed maximum
+    $( ".ui-slider-range-max" ).slider({
+        range: "max",
+        min: 1,
+        max: 10,
+        value: 2,
+        slide: function( event, ui ) {
+            $( "#amount" ).val( ui.value );
+        }
+    });
+    $( "#amount" ).val( $( ".ui-slider-range-max" ).slider( "value" ) );
+
+
+    //
+    // Vertical sliders
+    //
+
+    // Basic
+    $( ".ui-slider-vertical-default > span" ).each(function() {
+
+        // Read initial values from markup and remove that
+        var value = parseInt( $( this ).text(), 10 );
+        $( this ).empty().slider({
+            value: value,
+            animate: true,
+            orientation: "vertical"
+        });
+    });
+
+
+    // Range slider
+    $( ".ui-slider-vertical-range-min > span" ).each(function() {
+
+        // Read initial values from markup and remove that
+        var value = parseInt( $( this ).text(), 10 );
+        $( this ).empty().slider({
+            value: value,
+            range: "min",
+            animate: true,
+            orientation: "vertical"
+        });
+    });
+
+
+    // Fixed maximum
+    $( ".ui-slider-vertical-range-max > span" ).each(function() {
+
+        // Read initial values from markup and remove that
+        var value = parseInt( $( this ).text(), 10 );
+        $( this ).empty().slider({
+            value: value,
+            range: "max",
+            animate: true,
+            orientation: "vertical"
+        });
+    });
+
+
+
+    // Slider pips
+    // ------------------------------
+
+    //
+    // Horizontal sliders
+    //
+
+    // Basic
+    $(".ui-slider-pips").slider({
+        max: 14,
+        value: 7
+    });
+    $(".ui-slider-pips").slider("pips");
+
+
+    // With tooltip
+    $(".ui-slider-floats").slider({
+        max: 14,
+        value: 7
+    });
+    $(".ui-slider-floats").slider("pips");
+    $(".ui-slider-floats").slider("float");
+
+
+    // Both pips and tooltip
+    $(".ui-slider-floats-labels").slider({
+        max: 6,
+        value: 3
+    });
+    $(".ui-slider-floats-labels").slider("pips");
+    $(".ui-slider-floats-labels").slider("float", {
+        pips: true
+    });
+
+
+    // Label with pips
+    $(".ui-slider-labels").slider({
+        max: 8,
+        value: 4
+    });
+    $(".ui-slider-labels").slider("pips" , {
+        rest: "label"
+    });
+
+
+    // Hide rest of the points
+    $(".ui-slider-limits").slider({
+        max: 20,
+        range: true,
+        values: [ 4, 16 ]
+    });
+    $(".ui-slider-limits").slider("pips" , {
+        rest: false
+    });
+
+
+    // Display pips only
+    $(".ui-slider-pips-only").slider({
+        max: 20
+    });
+    $(".ui-slider-pips-only").slider("pips", {
+        first: "pip",
+        last: "pip"
+    });
+
+
+    // Suffix and prefix
+    $(".ui-slider-suffix-prefix").slider({
+        max: 4,
+        value: 2
+    });
+    $(".ui-slider-suffix-prefix").slider("pips", {
+        rest: "label", 
+        prefix: "$",
+        suffix: ".00"
+    });
+
+
+    // Custom label text
+    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+    $(".ui-slider-labels-custom").slider({
+        min: 0,
+        max: 11,
+        value: 5
+    });
+    $(".ui-slider-labels-custom").slider("pips" , {
+        rest: "label",
+        labels: months
+    });
+    $(".ui-slider-labels-custom").on("slidechange", function(e,ui) {
+        $("#ui-slider-labels-custom-output").html("You selected " + "<span class='text-danger'>" + months[ui.value] + "</span>");
+    });
+
+
+    // Label localization
+    var hanziNums = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
+
+    $(".ui-slider-local").slider({
+        min: 1,
+        max: 10,
+        value: 5
+    });
+    $(".ui-slider-local").slider("pips" , {
+        labels: hanziNums,
+        rest: "label"
+    });
+    $(".ui-slider-local").slider("float" , {
+        labels: hanziNums
+    });
+
+
+    //
+    // Vertical sliders
+    //
+
+    // Basic
+    $(".ui-slider-vertical-pips > span").each(function() {
+        var value = parseInt($(this).text());
+        $(this).empty().slider({
+            min: 0,
+            max: 10,
+            value: value,
+            animate: true,
+            range: 'min',
+            orientation: "vertical"
+        });
+    });
+    $(".ui-slider-vertical-pips > span").slider("pips");
+
+
+    // With labels
+    $( ".ui-slider-vertical-labels > span" ).each(function() {
+        var value = parseInt($(this).text());
+        $(this).empty().slider({
+            min: 0,
+            max: 4,
+            value: value,
+            animate: true,
+            range: 'min',
+            orientation: "vertical"
+        });
+    });
+    $(".ui-slider-vertical-labels > span").slider("pips" , {
+        rest: "label"
+    });
+
+
+    // With tooltip and handle
+    $( ".ui-slider-vertical-minmax > span" ).each(function() {
+        var value = parseInt($(this).text());
+        $(this).empty().slider({
+            min: 0,
+            max: 10,
+            value: value,
+            animate: true,
+            range: 'min',
+            orientation: "vertical"
+        });
+    });
+    $(".ui-slider-vertical-minmax > span").slider("pips");
+    $(".ui-slider-vertical-minmax > span").slider("float");
+
+
+
+    // NoUI sliders
+    // ------------------------------
+
+    //
+    // Basic options
+    //
+
+    // Basic
+    $(".noui-slider-default").noUiSlider({
+        start: [10, 50],
+        connect: true,
+        range: {
+            'min': 0,
+            'max': 60
+        }
+    });
+
+
+    // Handles
+    $('.noui-slider-handles').noUiSlider({
+        start: [4000, 8000],
+        range: {
+            'min': [2000],
+            'max': [10000]
+        }
+    });
+
+
+    // Range slider
+    $('.noui-slider-range').noUiSlider({
+        start: [4000],
+        range: {
+            'min': [2000],
+            'max': [10000]
+        },
+        serialization: {
+            lower: [
+                $.Link({
+                    target: $("#noui-range-val")
+                })
+            ]
+        }
+    });
+
+
+    // Stepping
+    $('.noui-slider-stepping').noUiSlider({
+        start: [4000],
+        step: 1000,
+        range: {
+            'min': [2000],
+            'max': [10000]
+        },
+        serialization: {
+            lower: [
+                $.Link({
+                    target: $("#noui-stepping-val")
+                })
+            ]
+        }
+    });
+
+
+    // Non-linear slider
+    $('.noui-slider-nonlinear').noUiSlider({
+        start: [4000],
+        range: {
+            'min': [2000],
+            '30%': [4000],
+            '70%': [8000],
+            'max': [10000]
+        },
+        serialization: {
+            lower: [
+                $.Link({
+                    target: $("#noui-nonlinear-val")
+                })
+            ]
+        }
+    });
+
+
+    // Non-linear stepping
+    $('.noui-slider-nonlinear-stepping').noUiSlider({
+        start: [500],
+        range: {
+            'min': [0],
+            '10%': [500, 500],
+            '50%': [4000, 1000],
+            'max': [10000]
+        },
+        serialization: {
+            lower: [
+                $.Link({
+                    target: $("#noui-nonlinear-stepping-val")
+                })
+            ]
+        }
+    });
+
+
+    // Snapping between steps
+    $('.noui-slider-snapping').noUiSlider({
+        start: [50, 800],
+        snap: true,
+        range: {
+            'min': 0,
+            '10%': 50,
+            '20%': 100,
+            '30%': 150,
+            '40%': 500,
+            '50%': 800,
+            'max': 1000
+        },
+        serialization: {
+            lower: [
+                $.Link({
+                    target: $("#noui-snapping-val1")
+                })
+            ],
+            upper: [
+                $.Link({
+                    target: $("#noui-snapping-val2")
+                })
+            ]
+        }
+    });
+
+
+    // Connect lower side
+    $(".noui-slider-connect-lower").noUiSlider({
+        start: 40,
+        connect: "lower",
+        range: {
+            'min': 0,
+            'max': 100
+        },
+        serialization: {
+            lower: [ $.Link({ target: $("#noui-connect-lower-val") }) ]
+        }
+    });
+
+
+    // Connect upper side
+    $(".noui-slider-connect-upper").noUiSlider({
+        start: 40,
+        connect: "upper",
+        range: {
+            'min': 0,
+            'max': 100
+        },
+        serialization: {
+            lower: [ $.Link({ target: $("#noui-connect-upper-val") }) ]
+        }
+    });
+
+
+    //
+    // Behaviours
+    //
+
+    // Slider behaviour
+    $(".noui-slider-behaviour").noUiSlider({
+        start: [40, 60],
+        step: 10,
+        behaviour: 'drag',
+        connect: true,
+        range: {
+            'min': 20,
+            'max': 80
+        }
+    });
+
+
+    // Tap behaviour
+    $(".noui-slider-tap").noUiSlider({
+        start: 40,
+        behaviour: 'tap',
+        connect: 'upper',
+        range: {
+            'min': 20,
+            'max': 80
+        }
+    });
+
+
+    // Drag behaviour
+    $(".noui-slider-drag").noUiSlider({
+        start: [40, 60],
+        behaviour: 'drag',
+        connect: true,
+        range: {
+            'min': 20,
+            'max': 80
+        }
+    });
+
+
+    // Fixed dragging
+    $(".noui-slider-drag-fixed").noUiSlider({
+        start: [40, 60],
+        behaviour: 'drag-fixed',
+        connect: true,
+        range: {
+            'min': 20,
+            'max': 80
+        }
+    });
+
+
+    // Snap behaviour
+    $(".noui-slider-snap").noUiSlider({
+        start: 40,
+        behaviour: 'snap',
+        connect: 'lower',
+        range: {
+            'min': 20,
+            'max': 80
+        }
+    });
+
+
+    // Combined options
+    $(".noui-slider-combined").noUiSlider({
+        start: [40, 60],
+        behaviour: 'drag-tap',
+        connect: true,
+        range: {
+            'min': 20,
+            'max': 80
+        }
+    });
+
+
+    //
+    // Other examples
+    //
+
+    // Tooltip
+    var customNouiToolTip = $.Link({
+        target: '-tooltip-<div class="noui-tooltip"></div>',
+        method: function (value) {
+            $(this).html('<span class="text-semibold">' + value + '</span>');
+        }
+    });
+    $(".noui-slider-tooltip").noUiSlider({
+        start: [10, 50],
+        connect: true,
+        range: {
+            'min': 0,
+            'max': 60
+        },
+        serialization: {
+            lower: [ customNouiToolTip, $.Link({ target: $("#noui-tooltip-val1") }) ],
+            upper: [ customNouiToolTip, $.Link({ target: $("#noui-tooltip-val2") }) ]
+        }
+    });
+
+
+    // Set minimum handles distance
+    $('.noui-slider-margin').noUiSlider({
+        start: [10, 50],
+        connect: true,
+        margin: 10,
+        range: {
+            'min': 0,
+            'max': 60
+        },
+        serialization: {
+            lower: [ $.Link({ target: $("#noui-margin-val1") }) ],
+            upper: [ $.Link({ target: $("#noui-margin-val2") }) ]
+        }
+    });
+
+
+    // Skip certain steps
+    $(".noui-slider-skip-steps").noUiSlider({
+        range: {
+            'min': 0,
+            '10%': 10,
+            '20%': 20,
+            '30%': 30,
+            // Nope, 40 is no fun.
+            '50%': 50,
+            '60%': 60,
+            '70%': 70,
+            // I never liked 80.
+            '90%': 90,
+            'max': 100 
+        },
+        snap: true,
+        connect: true,
+        start: [20, 90],
+        serialization: {
+            lower: [ $.Link({ target: $("#noui-skip-steps-val1") }) ],
+            upper: [ $.Link({ target: $("#noui-skip-steps-val2") }) ],
+            format: { decimals: 0 }
+        }
+    });
+
+
+    // RTL direction
+    $(".noui-slider-direction").noUiSlider({
+        start: 20,
+        connect: 'lower',
+        direction: "rtl",
+        range: {
+            'min': 0,
+            'max': 100
+        },
+        serialization: {
+            lower: [
+                $.Link({
+                    target: $("#noui-direction-val")
+                })
+            ]
+        }
+    });
+
+
+    //
+    // Vertical sliders
+    //
+
+    // Vertical direction
+    $('.noui-slider-values1').noUiSlider({
+        start: 20,
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-values2').noUiSlider({
+        start: 40,
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-values3').noUiSlider({
+        start: 60,
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-values4').noUiSlider({
+        start: 80,
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+
+    // Connect upper side
+    $('.noui-slider-upper1').noUiSlider({
+        start: 20,
+        connect: 'upper',
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-upper2').noUiSlider({
+        start: 40,
+        connect: 'upper',
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-upper3').noUiSlider({
+        start: 60,
+        connect: 'upper',
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-upper4').noUiSlider({
+        start: 80,
+        connect: 'upper',
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+
+    // Connect lower side
+    $('.noui-slider-lower1').noUiSlider({
+        start: 20,
+        connect: 'lower',
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-lower2').noUiSlider({
+        start: 40,
+        connect: 'lower',
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-lower3').noUiSlider({
+        start: 60,
+        connect: 'lower',
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+
+    $('.noui-slider-lower4').noUiSlider({
+        start: 80,
+        connect: 'lower',
+        orientation: 'vertical',
+        range: {
+            'min': [0],
+            'max': [100]
+        }
+    });
+    
+});

assets/js/pages/components_thumbnails.js

@@ -0,0 +1,30 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Thumbnails
+*
+*  Specific JS code additions for components_thumbnails.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Switchery toggle
+    var elems = Array.prototype.slice.call(document.querySelectorAll('.switch'));
+    elems.forEach(function(html) {
+		var switchery = new Switchery(html);
+    });
+
+
+    // Styled checkboxes/radios
+    $('.styled').uniform();
+
+
+    // Image lightbox
+    $('[data-popup="lightbox"]').fancybox({
+	    padding: 3
+    });
+
+});

assets/js/pages/credit_cards/list.js

@@ -0,0 +1,386 @@
+$(document).ready(function () {
+
+    // Detect pagination click
+    $('#pagination').on('click', 'a', function (e) {
+        e.preventDefault();
+
+        if ($(this).attr('href').trim() === '#') {
+            return;
+        }
+
+        const pageno = $(this).attr('data-ci-pagination-page');
+        loadPagination(pageno, $('.search-block').serialize());
+    });
+
+    // Prevent submit form by press the enter button
+    $(window).keydown(function (event) {
+        if (event.keyCode == 13) {
+            loadPagination(0);
+            event.preventDefault();
+            return false;
+        }
+    });
+
+    // Load Page
+    loadPagination(0);
+
+    function loadPagination(pagno, filters = null) {
+
+        $.ajax({
+            url: '/credit_cards/loadRecord',
+            type: 'get',
+            dataType: 'json',
+            async: false,
+            data: {
+                'rowno': pagno,
+                'filters': filters
+            },
+            success: function (response) {
+                $('#pagination').html(response.pagination);
+                createTable(response.result);
+            },
+            complete: function () { }
+        });
+    }
+
+    function createTable(result) {
+
+        $('#credit-card-list tbody').empty();
+
+        result.forEach(function (value, index) {
+            
+            let benefits = '';
+            let benefit_list = '';
+
+            value.benefits.forEach(function(value, index, array) {
+                benefits += value.benefit;
+                benefit_list += JSON.stringify(value);
+                if (index !== array.length - 1) {
+                    benefits += '<br>';
+                    benefit_list += '<br>';
+                }
+            })
+
+            let tr =
+                `<tr class="card-${value.credit_card_id}">
+                    <td>${index + 1}</td>
+                    <td class="bank-name">${value.bank_name}</td>
+                    <td class="card-name">${value.card_name}</td>
+                    <td class="input-group-btn">
+                        <button type="button" class="btn btn-info btn-sm btn-update">Update</button>
+                        <button type="button" class="btn btn-secondary btn-sm btn-cancel hidden">Cancel</button>
+                        <button type="button" class="btn btn-danger btn-sm btn-delete">Delete</button>
+                        <button type="button" class="btn btn-primary btn-sm btn-show-benefits">Show Benefits</button>
+                    </td>
+                    <td hidden>${value.credit_card_id}</td>
+                    <td hidden>
+                        ${benefits}
+                    </td>
+                    <td hidden>${value.bank_id}</td>
+                    <td hidden class="benefit-list">${benefit_list}</td>
+                </tr>`;
+
+            $('#credit-card-list tbody').append(tr);
+        })
+    }
+
+    // Add benefit
+    $('#btn-add-benefit').on('click', function () {
+        const val = $('#benefit').val().trim();
+
+        if (val !== '') {
+            $('#benefit-list ul').append(
+                `<li class="list-group-item list-group-item-success col-lg-12">
+                    <div class="col-lg-11" style="word-wrap: break-word;">${val}</div>
+                    <button type="button" class="close btn-delete-benefit col-lg-1" data-dismiss="alert" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </li>`
+            );
+            $('#benefit').val('');
+        }
+    })
+
+    // Detect on click the update button
+    $(document).on('click', '.btn-update', function (e) {
+        const $row = $(this).closest("tr"); // Finds the closest row <tr> 
+        const $tds = $row.find("td"); // Finds all children <td> elements
+
+        removeHiddenField();
+
+        $('.btn-cancel').addClass('hidden');
+        $('.btn-update').removeClass('hidden');
+        $('#btn-add').addClass('hidden');
+        $('#btn-update').removeClass('hidden');
+
+        $(this).siblings('.btn-cancel').removeClass('hidden');
+        $(this).addClass('hidden');
+
+        $('[name="bank_name"]').val($tds[1].innerText);
+        $('[name="bank_name"]').prop('disabled', true);
+        $('[name="card_name"]').val($tds[2].innerText);
+        $('[name="credit_card_id"]').val($tds[4].innerText);
+
+        $('#benefit-list ul').empty();
+        $('input[name="expired_date[]"]').remove();
+        $tds[7].innerHTML.split('<br>').forEach(function(val) {
+            if (val.trim() !== '') {
+                val = JSON.parse(val);
+
+                $('#benefit-list ul').append(
+                    `<li class="list-group-item list-group-item-success col-lg-12">
+                        <div class="col-lg-11" style="word-wrap: break-word;">${val.benefit}</div>
+                        <button type="button" class="close btn-delete-benefit col-lg-1" data-dismiss="alert" aria-label="Close">
+                            <span aria-hidden="true">×</span>
+                        </button>
+                    </li>`
+                );
+
+                // add expired date array
+                $('<input>').attr({
+                    type: 'hidden',
+                    name: 'expired_date[]',
+                    value: val.expired_date
+                }).appendTo('#credit-card-form');
+            }
+        })
+
+        $('<input>').attr({
+            type: 'hidden',
+            name: 'old_bank_name',
+            value: $tds[1].innerText
+        }).appendTo('#credit-card-form')
+
+        $('<input>').attr({
+            type: 'hidden',
+            name: 'old_card_name',
+            value: $tds[2].innerText
+        }).appendTo('#credit-card-form')
+
+        $('#credit-card-form').attr('action', origin + "/credit_cards/update/");
+    });
+
+    // Detect on click the cancel button
+    $(document).on('click', '.btn-cancel', function (e) {
+        $(this).siblings('.btn-update').removeClass('hidden');
+        $(this).addClass('hidden');
+        $('#btn-add').removeClass('hidden');
+        $('#btn-update').addClass('hidden');
+
+        $('#bank-name').val('');
+        $('#bank-name').prop('disabled', false);
+        $('#card-type').val('');
+        $('#credit-card-id').val('');
+        $('#benefit-list ul').empty();
+        removeHiddenField();
+
+        $('#credit-card-form').attr('action', origin + "/credit_cards/create");
+    });
+
+    // Detect on click the delete button
+    $(document).on('click', '.btn-delete', function (e) {
+
+        if (!confirm('Are you sure want to delete?')) {
+            return;
+        }
+
+        const $row = $(this).closest("tr"); // Finds the closest row <tr> 
+        const $tds = $row.find("td"); // Finds all children <td> elements
+
+        $('[name="credit_card_id"]').val($tds[4].innerText);
+        $('<input>').attr({
+            type: 'hidden',
+            name: 'bank_id',
+            value: $tds[6].innerText
+        }).appendTo('#credit-card-form');
+        $('#credit-card-form')
+            .attr('action', origin + "/credit_cards/destroy/")
+            .submit();
+    });
+
+    // Detect on click the add button on form
+    $('#btn-add').click(function (e) {
+        e.preventDefault();
+        var form = $('#credit-card-form');
+        $('input[name="benefits[]"]').remove();
+        $('.list-group li').each((idx, val) => {
+            $('<input>').attr({
+                type: 'hidden',
+                name: 'benefits[]',
+                value: val.children[0].innerText
+            }).appendTo(form);
+        });
+        var disabled = form.find(':input:disabled').removeAttr('disabled');
+        var data = form.serialize();
+        disabled.attr('disabled','disabled');
+        $.ajax({
+            url: '/credit_cards/create',
+            type: 'POST',
+            data: data,
+        })
+        .done(function( res ) {
+            if ( res.type && res.type == 'errors' ) {
+                alert( 'Create Credit Card Benefits Failed\n' + $("<div/>").html(res.message).text() );
+                return;
+            }
+            // update item
+            var page = $('#pagination');
+            var page = page.length > 0 ? page.find('ul>li.active a').text() : 0;
+            loadPagination(page, $('.search-block').serialize());
+            var target = $(document).find('tr.card-'+res.credit_card_id);
+            target.find('.btn-update').trigger('click');
+            
+            alert( 'Create Credit Card Benefits Successful' );       
+        })
+        .fail(function( jqXHR, textStatus, errorThrown ) {
+            console.log( errorThrown );
+        })
+        .always(function() {
+            lockUpdate = false;
+        });
+    });
+
+    // Detect on click the update button on form
+    $('#btn-update').click(function () {
+        var form = $('#credit-card-form');
+        $('input[name="benefits[]"]').remove();
+        $('.list-group li').each((idx, val) => {
+            $('<input>').attr({
+                type: 'hidden',
+                name: 'benefits[]',
+                value: val.children[0].innerText
+            }).appendTo(form);
+        });
+        var disabled = form.find(':input:disabled').removeAttr('disabled');
+        var data = form.serialize();
+        disabled.attr('disabled','disabled');
+
+        $.ajax({
+            url: '/credit_cards/update',
+            type: 'POST',
+            data: data,
+        })
+        .done(function( res ) {
+            if ( res.type && res.type == 'errors' ) {
+                alert( 'Update Credit Card Benefits Failed\n' + $("<div/>").html(res.message).text() );
+                return;
+            }
+            // update item
+            var page = $('#pagination');
+            var page = page.length > 0 ? page.find('ul>li.active a').text() : 0;
+            loadPagination(page, $('.search-block').serialize());
+            var target = $(document).find('tr.card-'+res.credit_card_id);
+            target.find('.btn-update').trigger('click');
+
+            alert( 'Update Credit Card Benefits Successful' );       
+        })
+        .fail(function( jqXHR, textStatus, errorThrown ) {
+            console.log( errorThrown );
+        })
+        .always(function() {
+            lockUpdate = false;
+        });
+    });
+
+    // remove benefit from list
+    $(document).on('click', '.btn-delete-benefit', function (e) {
+        $(this).closest("li").remove();
+    });
+
+    // button search for filter
+    $('.btn-search').on('click', function() {
+        loadPagination(0, $('.search-block').serialize());
+    })
+
+    // show benefit list modal
+    $(document).on('click', '.btn-show-benefits', function() {
+        const $row = $(this).closest("tr"); // Finds the closest row <tr> 
+        const $tds = $row.find("td"); // Finds all children <td> elements
+
+        $('#message-benefits').html('');
+        $("#benefit-list-modal").modal();
+
+        let benefit_list = $('#benefit-list-modal #benefit-list tbody');
+        benefit_list.empty();
+
+        $('#cell-actived').removeAttr('id');
+        $tds[7].setAttribute('id', 'cell-actived');
+        $tds[7].innerHTML.split('<br>').forEach(function (value, index) {
+
+            if (value.trim() !== '') {
+
+                value = JSON.parse(value);
+                let tr =
+                    `<tr>
+                        <td style="display: none">
+                            <input class="form-control" name="benefit_id_modal[]" value="${value.id}" />
+                        </td>
+                        <td>
+                            <input class="form-control" name="benefit_modal[]" value="${value.benefit}" />
+                        </td>
+                        <td>
+                            <input class="form-control expired_date" name="expired_date_modal[]" value="${value.expired_date}" />
+                        </td>
+                    </tr>`;
+    
+                benefit_list.append(tr);
+            }
+        })
+    })
+
+    $(document).on('click', '#btn-save', function() {
+        if ($('#benefit-list-modal #benefit-list tbody').children().length > 0) {
+            const benefit_id = $('input[name="benefit_id_modal[]"]').map(function(){ 
+                return this.value; 
+            }).get();
+
+            const benefit = $('input[name="benefit_modal[]"]').map(function(){ 
+                return this.value; 
+            }).get();
+
+            const expired_date = $('input[name="expired_date_modal[]"]').map(function(){ 
+                return this.value; 
+            }).get();
+
+            let new_val = '';
+            benefit_id.forEach((value, index, array) => {
+                new_val += JSON.stringify({
+                    'id': value,
+                    'benefit': benefit[index],
+                    'expired_date': expired_date[index]
+                })
+                if (index !== array.length - 1) {
+                    new_val += '<br>';
+                }
+            })
+
+            $.ajax({
+                url: '/credit_card_benefits/update',
+                type: 'post',
+                dataType: 'json',
+                data: {
+                    benefit_id,
+                    benefit,
+                    expired_date
+                },
+                success: function (response) {
+                    if (response.code === '200') {
+                        $('#cell-actived').html(new_val);
+                        $('.btn-cancel').click();
+                    }
+                    $('#message-benefits').html(response.message);
+                },
+            });
+        } 
+    })
+
+    $('body').on("focus", '.expired_date', function() {
+        window.addDatePicker(this);
+    })
+
+    function removeHiddenField() {
+        $('[name="old_bank_name"]').remove();
+        $('[name="old_card_name"]').remove();
+        $('[name="expired_date[]"]').remove();
+    }
+});

assets/js/pages/datatables_advanced.js

@@ -0,0 +1,96 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Advanced datatables
+*
+*  Specific JS code additions for datatable_advanced.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Datatable 'length' options
+    $('.datatable-show-all').DataTable({
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
+    });
+
+
+    // DOM positioning
+    $('.datatable-dom-position').DataTable({
+        dom: '<"datatable-header length-left"lp><"datatable-scroll"t><"datatable-footer info-right"fi>',
+    });
+
+
+    // Highlighting rows and columns on mouseover
+    var lastIdx = null;
+    var table = $('.datatable-highlight').DataTable();
+     
+    $('.datatable-highlight tbody').on('mouseover', 'td', function() {
+        var colIdx = table.cell(this).index().column;
+
+        if (colIdx !== lastIdx) {
+            $(table.cells().nodes()).removeClass('active');
+            $(table.column(colIdx).nodes()).addClass('active');
+        }
+    }).on('mouseleave', function() {
+        $(table.cells().nodes()).removeClass('active');
+    });
+
+
+    // Columns rendering
+    $('.datatable-columns').dataTable({
+        columnDefs: [ 
+            {
+                // The `data` parameter refers to the data for the cell (defined by the
+                // `data` option, which defaults to the column being worked with, in
+                // this case `data: 0`.
+                render: function (data, type, row) {
+                    return data +' ('+ row[3]+')';
+                },
+                targets: 0
+            },
+            { visible: false, targets: [ 3 ] }
+        ]
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_api.js

@@ -0,0 +1,115 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Datatables API
+*
+*  Specific JS code additions for datatable_api.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Single row selection
+    var singleSelect = $('.datatable-selection-single').DataTable();
+    $('.datatable-selection-single tbody').on('click', 'tr', function() {
+        if ($(this).hasClass('success')) {
+            $(this).removeClass('success');
+        }
+        else {
+            singleSelect.$('tr.success').removeClass('success');
+            $(this).addClass('success');
+        }
+    });
+
+
+    // Multiple rows selection
+    $('.datatable-selection-multiple').DataTable();
+    $('.datatable-selection-multiple tbody').on('click', 'tr', function() {
+        $(this).toggleClass('success');
+    });
+
+
+    // Individual column searching with text inputs
+    $('.datatable-column-search-inputs tfoot td').not(':last-child').each(function () {
+        var title = $('.datatable-column-search-inputs thead th').eq($(this).index()).text();
+        $(this).html('<input type="text" class="form-control input-sm" placeholder="Search '+title+'" />');
+    });
+    var table = $('.datatable-column-search-inputs').DataTable();
+    table.columns().every( function () {
+        var that = this;
+        $('input', this.footer()).on('keyup change', function () {
+            that.search(this.value).draw();
+        });
+    });
+
+
+    // Individual column searching with selects
+    $('.datatable-column-search-selects').DataTable({
+        initComplete: function () {
+            this.api().columns().every( function() {
+                var column = this;
+                var select = $('<select class="filter-select" data-placeholder="Filter"><option value=""></option></select>')
+                    .appendTo($(column.footer()).not(':last-child').empty())
+                    .on('change', function() {
+                        var val = $.fn.dataTable.util.escapeRegex(
+                            $(this).val()
+                        );
+ 
+                        column
+                            .search( val ? '^'+val+'$' : '', true, false )
+                            .draw();
+                    });
+ 
+                column.data().unique().sort().each( function (d, j) {
+                    select.append('<option value="'+d+'">'+d+'</option>')
+                });
+            });
+        }
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+
+
+    // Enable Select2 select for individual column searching
+    $('.filter-select').select2();
+    
+});

assets/js/pages/datatables_basic.js

@@ -0,0 +1,78 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Basic datatables
+*
+*  Specific JS code additions for datatable_basic.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Basic datatable
+    $('.datatable-basic').DataTable();
+
+
+    // Alternative pagination
+    $('.datatable-pagination').DataTable({
+        pagingType: "simple",
+        language: {
+            paginate: {'next': 'Next &rarr;', 'previous': '&larr; Prev'}
+        }
+    });
+
+
+    // Datatable with saving state
+    $('.datatable-save-state').DataTable({
+        stateSave: true
+    });
+
+
+    // Scrollable datatable
+    $('.datatable-scroll-y').DataTable({
+        autoWidth: true,
+        scrollY: 300
+    });
+
+
+if( $('#user_data').length ) {
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+}
+});

assets/js/pages/datatables_data_sources.js

@@ -0,0 +1,125 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Datatables data sources
+*
+*  Specific JS code additions for datatable_data_sources.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // HTML sourced data
+    $('.datatable-html').dataTable();
+
+
+    // AJAX sourced data
+    $('.datatable-ajax').dataTable({
+        ajax: 'assets/demo_data/tables/datatable_ajax.json'
+    });
+
+
+    // Javascript sourced data
+    var dataSet = [
+        ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
+        ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
+        ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
+        ['Trident','Internet Explorer 6','Win 98+','6','A'],
+        ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
+        ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
+        ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
+        ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
+        ['Gecko','Camino 1.0','OSX.2+','1.8','A'],
+        ['Gecko','Camino 1.5','OSX.3+','1.8','A'],
+        ['Webkit','Safari 1.2','OSX.3','125.5','A'],
+        ['Webkit','Safari 1.3','OSX.3','312.8','A'],
+        ['Webkit','Safari 2.0','OSX.4+','419.3','A'],
+        ['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
+        ['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
+        ['Misc','NetFront 3.1','Embedded devices','-','C'],
+        ['Misc','NetFront 3.4','Embedded devices','-','A'],
+        ['Misc','Dillo 0.8','Embedded devices','-','X'],
+        ['Misc','Links','Text only','-','X']
+    ];
+
+    $('.datatable-js').dataTable({
+        data: dataSet,
+        columnDefs: []
+    });
+
+
+    // Nested object data
+    $('.datatable-nested').dataTable({
+        ajax: 'assets/demo_data/tables/datatable_nested.json',
+        columns: [
+            {data: "name[, ]"},
+            {data: "hr.0" },
+            {data: "office"},
+            {data: "extn"},
+            {data: "hr.2"},
+            {data: "hr.1"}
+        ]
+    });
+
+
+    // Generate content for a column
+    var table = $('.datatable-generated').DataTable({
+        ajax: 'assets/demo_data/tables/datatable_ajax.json',
+        columnDefs: [{
+            targets: 2,
+            data: null,
+            defaultContent: "<button class='label label-default'>Show</button>"
+        },
+        { 
+            orderable: false,
+            targets: [0, 2]
+        }]
+    });
+    
+    $('.datatable-generated tbody').on('click', 'button', function () {
+        var data = table.row($(this).parents('tr')).data();
+        alert(data[0] +"'s location is: "+ data[ 2 ]);
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_autofill.js

@@ -0,0 +1,93 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Autofill extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_autofill.html page
+*
+*  Version: 1.0
+*  Latest update: Nov 9, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        }
+    });
+
+
+    // Basic initialization
+    $('.datatable-autofill-basic').DataTable({
+        autoFill: true
+    });
+
+
+    // Always confirm action
+    $('.datatable-autofill-confirm').DataTable({
+        autoFill: {
+            alwaysAsk: true
+        },
+    });
+
+
+    // Click focus
+    $('.datatable-autofill-click').DataTable({
+        autoFill: {
+            focus: 'click'
+        }
+    });
+
+
+    // Column selector
+    $('.datatable-autofill-column').DataTable( {
+        columnDefs: [
+            {
+                orderable: false,
+                className: 'select-checkbox',
+                targets: 0
+            },
+            {
+                orderable: false,
+                width: '100px',
+                targets: 6
+            }
+        ],
+        select: {
+            style: 'os',
+            selector: 'td:first-child'
+        },
+        order: [[1, 'asc']],
+        autoFill: {
+            columns: ':not(:first-child)'
+        }
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_buttons_flash.js

@@ -0,0 +1,108 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Buttons extension for Datatables. Flash examples
+*
+*  Specific JS code additions for datatable_extension_buttons_flash.html page
+*
+*  Version: 1.0
+*  Latest update: Nov 9, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        }
+    });
+
+
+    // Basic initialization
+    $('.datatable-button-flash-basic').DataTable({
+        buttons: {
+            dom: {
+                button: {
+                    className: 'btn btn-default'
+                }
+            },
+            buttons: [
+                {extend: 'copyFlash'},
+                {extend: 'csvFlash'},
+                {extend: 'excelFlash'},
+                {extend: 'pdf'}
+            ]
+        }
+    });
+
+
+    // Custom file name
+    $('.datatable-button-flash-name').DataTable({
+        buttons: {
+            dom: {
+                button: {
+                    className: 'btn btn-default'
+                }
+            },
+            buttons: [
+                {
+                    extend: 'excelFlash',
+                    title: 'Data export in Excel'
+                },
+                {
+                    extend: 'pdfFlash',
+                    title: 'Data export in PDF'
+                }
+            ]
+        }
+    });
+
+
+    // Custom message
+    $('.datatable-button-flash-message').DataTable({
+        buttons: [
+            {
+                extend: 'pdfFlash',
+                text: 'Export to PDF',
+                className: 'btn bg-blue',
+                message: 'This is a custom text added in table configuration.'
+            }
+        ]
+    });
+
+
+    // File size and orientation
+    $('.datatable-button-flash-size').DataTable({
+        buttons: [
+            {
+                extend: 'pdfFlash',
+                text: 'Export to PDF',
+                className: 'btn bg-blue',
+                orientation: 'landscape',
+                pageSize: 'LEGAL'
+            }
+        ]
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_buttons_init.js

@@ -0,0 +1,121 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Buttons extension for Datatables. Init examples
+*
+*  Specific JS code additions for datatable_extension_buttons_init.html page
+*
+*  Version: 1.0
+*  Latest update: Nov 9, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        }
+    });
+
+
+    // Basic initialization
+    $('.datatable-button-init-basic').DataTable({
+        buttons: {
+            dom: {
+                button: {
+                    className: 'btn btn-default'
+                }
+            },
+            buttons: [
+                {extend: 'copy'},
+                {extend: 'csv'},
+                {extend: 'excel'},
+                {extend: 'pdf'},
+                {extend: 'print'}
+            ]
+        }
+    });
+
+
+    // Custom button
+    $('.datatable-button-init-custom').DataTable({
+        buttons: [
+            {
+                text: 'Custom button',
+                className: 'btn bg-teal-400',
+                action: function(e, dt, node, config) {
+                    swal({
+                        title: "Good job!",
+                        text: "Custom button activated",
+                        confirmButtonColor: "#66BB6A",
+                        type: "success"
+                    });
+                }
+            }
+        ]
+    });
+
+
+    // Buttons collection
+    $('.datatable-button-init-collection').DataTable({
+        buttons: [
+            {
+                extend: 'collection',
+                text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
+                className: 'btn bg-blue btn-icon',
+                buttons: [
+                    {
+                        text: 'Toggle first name',
+                        action: function ( e, dt, node, config ) {
+                            dt.column( 0 ).visible( ! dt.column( 0 ).visible() );
+                        }
+                    },
+                    {
+                        text: 'Toggle status',
+                        action: function ( e, dt, node, config ) {
+                            dt.column( -2 ).visible( ! dt.column( -2 ).visible() );
+                        }
+                    }
+                ]
+            }
+        ]
+    });
+
+
+    // Page length
+    $('.datatable-button-init-length').DataTable({
+        dom: '<"datatable-header"fB><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        lengthMenu: [
+            [ 10, 25, 50, -1 ],
+            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
+        ],
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn bg-slate-600'
+            }
+        ]
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_buttons_print.js

@@ -0,0 +1,115 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Buttons extension for Datatables. Print examples
+*
+*  Specific JS code additions for datatable_extension_buttons_print.html page
+*
+*  Version: 1.1
+*  Latest update: Mar 6, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        }
+    });
+
+
+    // Basic initialization
+    $('.datatable-button-print-basic').DataTable({
+        buttons: [
+            {
+                extend: 'print',
+                text: '<i class="icon-printer position-left"></i> Print table',
+                className: 'btn bg-blue'
+            }
+        ]
+    });
+
+
+    // Disable auto print
+    $('.datatable-button-print-disable').DataTable({
+        buttons: [
+            {
+                extend: 'print',
+                text: '<i class="icon-printer position-left"></i> Print table',
+                className: 'btn bg-blue',
+                autoPrint: false
+            }
+        ]
+    });
+
+
+    // Export options - column selector
+    $('.datatable-button-print-columns').DataTable({
+        columnDefs: [{
+            targets: -1, // Hide actions column
+            visible: false
+        }],
+        buttons: [
+            {
+                extend: 'print',
+                text: '<i class="icon-printer position-left"></i> Print table',
+                className: 'btn btn-default',
+                exportOptions: {
+                    columns: ':visible'
+                }
+            },
+            {
+                extend: 'colvis',
+                text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
+                className: 'btn btn-default btn-icon'
+            }
+        ]
+    });
+
+
+    // Export options - row selector
+    $('.datatable-button-print-rows').DataTable({
+        buttons: {
+            buttons: [
+                {
+                    extend: 'print',
+                    className: 'btn btn-default',
+                    text: '<i class="icon-printer position-left"></i> Print all'
+                },
+                {
+                    extend: 'print',
+                    className: 'btn btn-default',
+                    text: '<i class="icon-checkmark3 position-left"></i> Print selected',
+                    exportOptions: {
+                        modifier: {
+                            selected: true
+                        }
+                    }
+                }
+            ],
+        },
+        select: true
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_colvis.js

@@ -0,0 +1,137 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Columns Visibility (Buttons) extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_colvis.html page
+*
+*  Version: 1.2
+*  Latest update: Mar 6, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        }
+    });
+
+    
+    // Basic example
+    $('.datatable-colvis-basic').DataTable({
+        buttons: [
+            {
+                extend: 'colvis',
+                className: 'btn btn-default'
+            }
+        ]
+    });
+
+
+    // Multi-column layout
+    $('.datatable-colvis-multi').DataTable({
+        buttons: [
+            {
+                extend: 'colvis',
+                text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
+                className: 'btn bg-blue btn-icon',
+                collectionLayout: 'fixed two-column'
+            }
+        ]
+    });
+
+
+    // Restore column visibility
+    $('.datatable-colvis-restore').DataTable({
+        buttons: [
+            {
+                extend: 'colvis',
+                text: '<i class="icon-grid7"></i> <span class="caret"></span>',
+                className: 'btn bg-teal-400 btn-icon',
+                postfixButtons: [ 'colvisRestore' ]
+            }
+        ],
+        columnDefs: [
+            {
+                targets: -1,
+                visible: false
+            }
+        ]
+    });
+
+
+    // State saving
+    $('.datatable-colvis-state').DataTable({
+        buttons: [
+            {
+                extend: 'colvis',
+                text: '<i class="icon-grid3"></i> <span class="caret"></span>',
+                className: 'btn bg-indigo-400 btn-icon'
+            }
+        ],
+        stateSave: true,
+        columnDefs: [
+            {
+                targets: -1,
+                visible: false
+            }
+        ]
+    });
+
+
+    // Column groups
+    $('.datatable-colvis-group').DataTable({
+        buttons: {
+            buttons: [
+                {
+                    extend: 'colvisGroup',
+                    text: 'Office info',
+                    className: 'btn btn-default',
+                    show: [0, 1, 2],
+                    hide: [3, 4, 5]
+                },
+                {
+                    extend: 'colvisGroup',
+                    className: 'btn btn-default',
+                    text: 'HR info',
+                    show: [3, 4, 5],
+                    hide: [0, 1, 2]
+                },
+                {
+                    extend: 'colvisGroup',
+                    className: 'btn btn-default',
+                    text: 'Show all',
+                    show: ':hidden'
+                }
+            ]
+        }
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+    
+    // Launch Uniform styling for checkboxes
+    $('.ColVis_Button').addClass('btn btn-primary btn-icon').on('click mouseover', function() {
+        $('.ColVis_collection input').uniform();
+    });
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_fixed_columns.js

@@ -0,0 +1,186 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Fixed Columns extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_fixed_columns.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        }
+    });
+
+
+    // Left fixed column example
+    $('.datatable-fixed-left').DataTable({
+        columnDefs: [
+            { 
+                orderable: false,
+                targets: [5]
+            },
+            { 
+                width: "200px",
+                targets: [0]
+            },
+            { 
+                width: "300px",
+                targets: [1]
+            },
+            { 
+                width: "200px",
+                targets: [5, 6]
+            },
+            { 
+                width: "100px",
+                targets: [4]
+            }
+        ],
+        scrollX: true,
+        scrollY: '350px',
+        scrollCollapse: true,
+        fixedColumns: true
+    });
+
+
+    // Right fixed column example
+    $('.datatable-fixed-right').DataTable({
+        columnDefs: [
+            { 
+                orderable: false,
+                targets: [5]
+            },
+            { 
+                width: "300px",
+                targets: [0]
+            },
+            { 
+                width: "300px",
+                targets: [1]
+            },
+            { 
+                width: "200px",
+                targets: [5, 6]
+            },
+            { 
+                width: "100px",
+                targets: [3, 4]
+            }
+        ],
+        scrollX: true,
+        scrollY: '350px',
+        scrollCollapse: true,
+        fixedColumns: {
+            leftColumns: 0,
+            rightColumns: 1
+        }
+    });
+
+
+    // Left and right fixed columns
+    $('.datatable-fixed-both').DataTable({
+        columnDefs: [
+            { 
+                orderable: false,
+                targets: [ 5 ]
+            },
+            { 
+                width: "200px",
+                targets: [0]
+            },
+            { 
+                width: "100px",
+                targets: [1]
+            },
+            { 
+                width: "200px",
+                targets: [5, 6]
+            },
+            { 
+                width: "100px",
+                targets: [4]
+            }
+        ],
+        scrollX: true,
+        scrollY: '350px',
+        scrollCollapse: true,
+        fixedColumns: {
+            leftColumns: 1,
+            rightColumns: 1
+        }
+    });
+
+
+    //
+    // Fixed column with complex headers
+    //
+    
+    // Initialize
+    var table = $('.datatable-fixed-complex').DataTable({
+        autoWidth: false,
+        columnDefs: [
+            { 
+                orderable: false,
+                targets: [5]
+            },
+            { 
+                width: "250px",
+                targets: [0]
+            },
+            { 
+                width: "250px",
+                targets: [1]
+            },
+            { 
+                width: "200px",
+                targets: [5, 6]
+            },
+            { 
+                width: "100px",
+                targets: [4]
+            }
+        ],
+        scrollX: true,
+        scrollY: '350px',
+        scrollCollapse: true,
+        fixedColumns: true
+    });
+
+    // Adjust columns on window resize
+    setTimeout(function() {
+        $(window).on('resize', function () {
+            table.columns.adjust();
+        });
+    }, 100);
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_fixed_header.js

@@ -0,0 +1,122 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Fixed Header extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_fixed_header.html page
+*
+*  Version: 1.1
+*  Latest update: Jan 5, 2017
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{ 
+            orderable: false,
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Basic initialization
+    var table_basic = $('.datatable-header-basic').DataTable({
+        fixedHeader: true
+    });
+
+
+    // Header and footer fixed
+    var table_footer = $('.datatable-header-footer').DataTable({
+        fixedHeader: {
+            header: true,
+            footer: true
+        }
+    });
+
+
+    // Offset
+    var table_offset = $('.datatable-header-offset').DataTable({
+        fixedHeader: {
+            header: true,
+            
+        }
+    });
+
+    // Init offset toggle
+    var toggleType = document.querySelector('.toggle-offset');
+    var toggleTypeInit = new Switchery(toggleType, { secondaryColor: '#FF7043'});
+
+    // Toggle offset and fixed navbar
+    toggleType.onchange = function() {
+        if(toggleType.checked) {
+
+            // Toggle necessary body and navbar classes
+            $('body').children('.navbar').first().addClass('navbar-fixed-top');
+            $('body').addClass('navbar-top');
+
+            // Add offset to all
+            table_basic.fixedHeader.headerOffset($('.navbar-fixed-top').height());
+            table_footer.fixedHeader.headerOffset($('.navbar-fixed-top').height());
+            table_reorder.fixedHeader.headerOffset($('.navbar-fixed-top').height());
+            table_offset.fixedHeader.headerOffset($('.navbar-fixed-top').height());
+        }
+        else {
+
+            // Toggle necessary body and navbar classes
+            $('body').children('.navbar').first().removeClass('navbar-fixed-top');
+            $('body').removeClass('navbar-top');
+
+            // Remove offset from all
+            table_basic.fixedHeader.headerOffset(0);
+            table_footer.fixedHeader.headerOffset(0);
+            table_reorder.fixedHeader.headerOffset(0);
+            table_offset.fixedHeader.headerOffset(0);
+        }
+    };
+
+
+    // ColReorder integration
+    var table_reorder = $('.datatable-header-reorder').DataTable({
+        fixedHeader: true,
+        colReorder: true
+    });
+
+
+    // Adjust table header if sidebar toggler is clicked
+    $('.sidebar-control').on('click', function() {
+        table_basic.fixedHeader.adjust();
+        table_footer.fixedHeader.adjust();
+        table_offset.fixedHeader.adjust();
+        table_reorder.fixedHeader.adjust();
+    });
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_key_table.js

@@ -0,0 +1,94 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Key Table extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_key_table.html page
+*
+*  Version: 1.0
+*  Latest update: Nov 9, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Basic initialization
+    $('.datatable-key-basic').DataTable({
+        keys: true
+    });
+
+
+    // Scrollable table
+    $('.datatable-key-scroll').DataTable({
+        dom: '<"datatable-header info-right"fi><"datatable-scroll-wrap"t>',
+        scrollY: 300,
+        paging: false,
+        keys: true
+    });
+ 
+
+    // Custom class
+    $('.datatable-key-class').DataTable({
+        keys: {
+            className: 'focus focus-success'
+        }
+    });
+
+
+    // Table with events
+    var table = $('.datatable-key-events').DataTable({
+        keys: true
+    });
+ 
+    // Events
+    var events = $('#key-events');
+    table
+        .on('key', function (e, datatable, key, cell, originalEvent) {
+            events.append(JSON.stringify('Key press: '+key+' for cell '+cell.data()), '\n');
+        })
+        .on('key-focus', function (e, datatable, cell) {
+            events.append(JSON.stringify('Cell focus: '+cell.data()), '\n');
+        })
+        .on('key-blur', function (e, datatable, cell) {
+            events.append(JSON.stringify('Cell blur: '+cell.data()), '\n');
+        });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_reorder.js

@@ -0,0 +1,79 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Reorder Columns extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_reorder.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        colReorder: true,
+        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Basic column reorder
+    $('.datatable-reorder').DataTable();
+
+
+    // Realtime updating
+    $('.datatable-reorder-realtime').DataTable({
+        colReorder: {
+            realtime: true
+        }
+    });
+
+
+    // Save state after reorder
+    $('.datatable-reorder-state-saving').DataTable({
+        stateSave: true
+    });
+
+
+    // Predefined column ordering
+    $('.datatable-reorder-predefined').DataTable({
+        colReorder: {
+            order: [1, 3, 2, 4, 0, 5]
+        }
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_row_reorder.js

@@ -0,0 +1,98 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Row Reorder extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_row_reorder.html page
+*
+*  Version: 1.0
+*  Latest update: Nov 9, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Basic initialization
+    $('.datatable-row-basic').DataTable({
+        rowReorder: true
+    });
+
+
+    // Full row selection
+    $('.datatable-row-full').DataTable({
+        rowReorder: {
+            selector: 'tr'
+        },
+        columnDefs: [
+            { targets: 0, visible: false }
+        ]
+    });
+
+
+    // Responsive integration
+    $('.datatable-row-responsive').DataTable({
+        rowReorder: {
+            selector: 'td:nth-child(2)'
+        },
+        responsive: true
+    });
+
+
+    // Reorder events
+    var table = $('.datatable-row-events').DataTable({
+        rowReorder: true
+    });
+ 
+    // Setup event
+    table.on('row-reorder', function (e, diff, edit) {
+        var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
+ 
+        for (var i=0, ien=diff.length ; i<ien ; i++) {
+            var rowData = table.row( diff[i].node ).data();
+ 
+            result += rowData[1]+' updated to be in position '+
+                diff[i].newData+' (was '+diff[i].oldData+')<br>';
+        }
+ 
+        $('#event-result').html('Event result:<br>'+result);
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_scroller.js

@@ -0,0 +1,105 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Scroller extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_scroller.html page
+*
+*  Version: 1.1
+*  Latest update: Nov 10, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Override defaults
+    // ------------------------------
+
+    // Datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        columnDefs: [
+            { 
+                width: "100px",
+                targets: [ 0 ]
+            },
+            { 
+                width: "23%",
+                targets: [ 1, 2, 3, 4 ]
+            }
+        ],
+        dom: '<"datatable-header info-right"fi><"datatable-scroll"tS>',
+        ajax: 'assets/demo_data/tables/datatable_2500.json',
+        deferRender: true,
+        scrollY: 419,
+        scrollCollapse: true,
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        }
+    });
+
+
+    // Table setup
+    // ------------------------------
+
+    // Basic scroller demo
+    setTimeout(function() {
+        $('.datatable-scroller').DataTable();
+    }, 100);
+
+
+    // Scroller with Buttons extension
+    setTimeout(function() {
+        $('.datatable-scroller-buttons').DataTable({
+            dom: '<"datatable-header dt-buttons-right"fB><"datatable-scroll"tS><"datatable-footer"i>',
+            buttons: {
+                dom: {
+                    button: {
+                        className: 'btn btn-default'
+                    }
+                },
+                buttons: [
+                    {extend: 'copy'},
+                    {extend: 'csv'},
+                    {extend: 'excel'},
+                    {extend: 'pdf'},
+                    {extend: 'print'}
+                ]
+            }
+        });
+    }, 1000);
+
+
+    // Saving state in scroller
+    setTimeout(function() {
+        $('.datatable-scroller-state').DataTable({
+            stateSave: true
+        });
+    }, 2000);
+
+
+    // Using Scroller API
+    setTimeout(function() {
+        $('.datatable-scroller-api').DataTable({
+            stateSave: true,
+            initComplete: function () {
+                var api = this.api();
+                api.scroller().scrollToRow( 1000 );
+            }
+        });
+    }, 3000);
+    
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_extension_select.js

@@ -0,0 +1,112 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Select extension for Datatables
+*
+*  Specific JS code additions for datatable_extension_select.html page
+*
+*  Version: 1.0
+*  Latest update: Nov 9, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Basic initialization
+    $('.datatable-select-basic').DataTable({
+        select: true
+    });
+
+
+    // Single item selection
+    $('.datatable-select-single').DataTable({
+        select: {
+            style: 'single'
+        }
+    });
+
+
+    // Multiple items selection
+    $('.datatable-select-multiple').DataTable({
+        select: {
+            style: 'multi'
+        }
+    });
+
+
+    // Checkbox selection
+    $('.datatable-select-checkbox').DataTable({
+        columnDefs: [
+            {
+                orderable: false,
+                className: 'select-checkbox',
+                targets: 0
+            },
+            {
+                orderable: false,
+                width: '100px',
+                targets: 6
+            }
+        ],
+        select: {
+            style: 'os',
+            selector: 'td:first-child'
+        },
+        order: [[1, 'asc']]
+    });
+
+
+    // Buttons
+    $('.datatable-select-buttons').DataTable({
+        dom: '<"dt-buttons-full"B><"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        buttons: [
+            {extend: 'selected', className: 'btn btn-default'},
+            {extend: 'selectedSingle', className: 'btn btn-default'},
+            {extend: 'selectAll', className: 'btn bg-blue'},
+            {extend: 'selectNone', className: 'btn bg-blue'},
+            {extend: 'selectRows', className: 'btn bg-teal-400'},
+            {extend: 'selectColumns', className: 'btn bg-teal-400'},
+            {extend: 'selectCells', className: 'btn bg-teal-400'}
+        ],
+        select: true
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_responsive.js

@@ -0,0 +1,136 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Responsive extension for Datatables
+*
+*  Specific JS code additions for datatable_responsive.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        responsive: true,
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Basic responsive configuration
+    $('.datatable-responsive').DataTable();
+
+
+    // Column controlled child rows
+    $('.datatable-responsive-column-controlled').DataTable({
+        responsive: {
+            details: {
+                type: 'column'
+            }
+        },
+        columnDefs: [
+            {
+                className: 'control',
+                orderable: false,
+                targets:   0
+            },
+            { 
+                width: "100px",
+                targets: [6]
+            },
+            { 
+                orderable: false,
+                targets: [6]
+            }
+        ],
+        order: [1, 'asc']
+    });
+
+
+    // Control position
+    $('.datatable-responsive-control-right').DataTable({
+        responsive: {
+            details: {
+                type: 'column',
+                target: -1
+            }
+        },
+        columnDefs: [
+            {
+                className: 'control',
+                orderable: false,
+                targets: -1
+            },
+            { 
+                width: "100px",
+                targets: [5]
+            },
+            { 
+                orderable: false,
+                targets: [5]
+            }
+        ]
+    });
+
+
+    // Whole row as a control
+    $('.datatable-responsive-row-control').DataTable({
+        responsive: {
+            details: {
+                type: 'column',
+                target: 'tr'
+            }
+        },
+        columnDefs: [
+            {
+                className: 'control',
+                orderable: false,
+                targets:   0
+            },
+            { 
+                width: "100px",
+                targets: [6]
+            },
+            { 
+                orderable: false,
+                targets: [6]
+            }
+        ],
+        order: [1, 'asc']
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/datatables_sorting.js

@@ -0,0 +1,96 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Datatable sorting
+*
+*  Specific JS code additions for datatable_sorting.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Setting datatable defaults
+    $.extend( $.fn.dataTable.defaults, {
+        autoWidth: false,
+        columnDefs: [{ 
+            orderable: false,
+            width: '100px',
+            targets: [ 5 ]
+        }],
+        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        drawCallback: function () {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function() {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // Default ordering example
+    $('.datatable-sorting').DataTable({
+        order: [3, "desc"]
+    });
+
+
+    // Multi column ordering
+    $('.datatable-multi-sorting').DataTable({
+        columnDefs: [{
+            targets: [0],
+            orderData: [0, 1]
+        }, {
+            targets: [1],
+            orderData: [1, 0]
+        }, {
+            targets: [4],
+            orderData: [4, 0]
+        }, {
+            orderable: false,
+            width: '100px',
+            targets: [5]
+        }]
+    });
+
+
+    // Complex headers with sorting
+    $('.datatable-complex-header').DataTable({
+        columnDefs: []
+    });
+
+
+    // Sequence control
+    $('.datatable-sequence-control').dataTable( {
+        "aoColumns": [
+            null,
+            null,
+            {"orderSequence": ["asc"]},
+            {"orderSequence": ["desc", "asc", "asc"]},
+            {"orderSequence": ["desc"]},
+            null
+        ]
+    });
+
+
+
+    // External table additions
+    // ------------------------------
+
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+    
+});

assets/js/pages/ecommerce_customers.js

@@ -0,0 +1,196 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Customers
+*
+*  Specific JS code additions for ecommerce_customers.html page
+*
+*  Version: 1.0
+*  Latest update: Mar 20, 2017
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Chart configuration
+    // ------------------------------
+
+    // Base
+    require.config({
+        paths: {
+            echarts: 'assets/js/plugins/visualization/echarts'
+        }
+    });
+
+    // Configuration
+    require(
+
+        // Add necessary charts
+        [
+          'echarts',
+          'echarts/theme/limitless',
+          'echarts/chart/line',
+          'echarts/chart/bar'
+        ],
+
+
+        // Charts setup
+        function (ec, limitless) {
+
+            // Initialize charts
+            var line_bar = ec.init(document.getElementById('customers_chart'), limitless);
+
+            // Charts options
+            line_bar_options = {
+
+                // Setup grid
+                grid: {
+                    x: 55,
+                    x2: 45,
+                    y: 35,
+                    y2: 25
+                },
+
+                // Add custom colors
+                color: ['#EF5350', '#03A9F4','#4CAF50'],
+
+                // Add tooltip
+                tooltip: {
+                    trigger: 'axis'
+                },
+
+                // Add legend
+                legend: {
+                    data: ['New customers','Returned customers','Orders']
+                },
+
+                // Horizontal axis
+                xAxis: [{
+                    type: 'category',
+                    data: ['January','February','March','April','May','June','July','August','September','October','November','December']
+                }],
+
+                // Vertical axis
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: 'Visitors',
+                        axisLabel: {
+                            formatter: '{value}k'
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: 'Orders',
+                        axisLabel: {
+                            formatter: '{value}k'
+                        }
+                    }
+                ],
+
+                // Add series
+                series: [
+                    {
+                        name: 'New customers',
+                        type: 'bar',
+                        data: [20, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 64, 33]
+                    },
+                    {
+                        name: 'Returned customers',
+                        type: 'bar',
+                        data: [26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23]
+                    },
+                    {
+                        name: 'Orders',
+                        type: 'line',
+                        yAxisIndex: 1,
+                        data: [20, 22, 33, 45, 63, 102, 203, 234, 230, 165, 120, 62]
+                    }
+                ]
+            };
+
+            // Apply options
+            line_bar.setOption(line_bar_options);
+
+            // Resize charts
+            window.onresize = function () {
+                setTimeout(function (){
+                    line_bar.resize();
+                }, 200);
+            }
+        }
+    );
+
+
+    // Table setup
+    // ------------------------------
+
+    // Initialize
+    $('.table-customers').DataTable({
+        autoWidth: false,
+        columnDefs: [
+            {
+                targets: 0,
+                width: 400
+            },
+            { 
+                orderable: false,
+                width: 16,
+                targets: 6
+            },
+            {
+                className: 'control',
+                orderable: false,
+                targets: -1
+            },
+        ],
+        order: [[ 0, 'asc' ]],
+        dom: '<"datatable-header datatable-header-accent"fBl><""t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Search people:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        lengthMenu: [ 25, 50, 75, 100 ],
+        displayLength: 50,
+        responsive: {
+            details: {
+                type: 'column',
+                target: -1
+            }
+        },
+        buttons: [
+            {
+                extend: 'pdfHtml5',
+                text: 'Export list <i class="icon-file-pdf position-right"></i>',
+                className: 'btn bg-blue',
+                orientation: 'landscape',
+                exportOptions: {
+                    columns: [ 0, 1, 2, 3, 4, 5 ],
+                    stripHtml: true
+                },
+                customize: function (doc) {
+                    doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');
+                }
+            }
+        ],
+        drawCallback: function (settings) {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function(settings) {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+
+    // External table additions
+    // ------------------------------
+    
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+
+});

assets/js/pages/ecommerce_orders_history.js

@@ -0,0 +1,104 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Orders history
+*
+*  Specific JS code additions for ecommerce_orders_history.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Table setup
+    // ------------------------------
+
+    // Initialize
+    var table = $('.table-orders-history').DataTable({
+        autoWidth: false,
+        columnDefs: [
+            {
+                visible: false,
+                targets: 0
+            },
+            {
+                targets: 1,
+                width: 400
+            },
+            { 
+                orderable: false,
+                width: 16,
+                targets: 7
+            }
+        ],
+        order: [[ 0, 'asc' ]],
+        dom: '<"datatable-header datatable-header-accent"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        language: {
+            search: '<span>Filter:</span> _INPUT_',
+            searchPlaceholder: 'Type to filter...',
+            lengthMenu: '<span>Show:</span> _MENU_',
+            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
+        },
+        lengthMenu: [ 25, 50, 75, 100 ],
+        displayLength: 25,
+        buttons: [
+            {
+                extend: 'pdfHtml5',
+                text: 'Export to PDF <i class="icon-file-pdf position-right"></i>',
+                className: 'btn bg-teal-400',
+                orientation: 'landscape',
+                exportOptions: {
+                    columns: [ 1, 2, 3, 4, 5, 6 ],
+                    stripHtml: true
+                },
+                customize: function (doc) {
+                    doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');
+                }
+            }
+        ],
+        drawCallback: function (settings) {
+            var api = this.api();
+            var rows = api.rows({ page: 'current' }).nodes();
+            var last = null;
+ 
+            api.column(0, { page: 'current' }).data().each(function(group, i) {
+                if (last !== group) {
+                    $(rows).eq(i).before(
+                        '<tr class="active group border-double"><td colspan="8" class="text-semibold">' + group + '</td></tr>'
+                    );
+ 
+                    last = group;
+                }
+            });
+
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
+        },
+        preDrawCallback: function(settings) {
+            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
+        }
+    });
+
+    // Order by the grouping
+    $('.table-orders-history tbody').on( 'click', 'tr.group', function() {
+        var currentOrder = table.order()[0];
+        if (currentOrder[0] === 0 && currentOrder[1] === 'asc') {
+            table.order([0, 'desc']).draw();
+        }
+        else {
+            table.order([0, 'asc']).draw();
+        }
+    });
+
+
+    // External table additions
+    // ------------------------------
+    
+    // Enable Select2 select for the length option
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 'auto'
+    });
+
+});

assets/js/pages/ecommerce_product_list.js

@@ -0,0 +1,24 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Ecommerce - product list
+*
+*  Specific JS code additions for product listing pages
+*
+*  Version: 1.0
+*  Latest update: Mar 20, 2017
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Lightbox
+    $('[data-popup="lightbox"]').fancybox({
+	    padding: 3
+    });
+
+    // Uniform.js - custom checkboxes
+    $('.styled').uniform({
+        radioClass: 'choice'
+    });
+
+});

assets/js/pages/editor_ckeditor.js

@@ -0,0 +1,96 @@
+/* ------------------------------------------------------------------------------
+*
+*  # CKEditor editor
+*
+*  Specific JS code additions for editor_ckeditor.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Full featured editor
+    CKEDITOR.replace( 'editor-full', {
+        height: '400px',
+        extraPlugins: 'forms'
+    });
+
+
+
+    // Readonly editor
+    // ------------------------------
+
+    // Setup
+    var editor = CKEDITOR.replace('editor-readonly', {
+        height: '400px'
+    });
+
+    // The instanceReady event is fired, when an instance of CKEditor has finished its initialization.
+    CKEDITOR.on('instanceReady', function (ev) {
+
+        // Show this "on" button.
+        document.getElementById('readOnlyOn').style.display = '';
+
+        // Event fired when the readOnly property changes.
+        editor.on('readOnly', function() {
+            document.getElementById('readOnlyOn').style.display = this.readOnly ? 'none' : '';
+            document.getElementById('readOnlyOff').style.display = this.readOnly ? '' : 'none';
+        });
+    });
+
+    // Toggle state
+    function toggleReadOnly(isReadOnly) {
+        editor.setReadOnly(isReadOnly);
+    }
+    document.getElementById('readOnlyOn').onclick=function(){ toggleReadOnly() }
+    document.getElementById('readOnlyOff').onclick=function(){ toggleReadOnly(false) }
+
+
+
+    // Enter key configuration
+    // ------------------------------
+
+    // Define editor
+    var editor2;
+
+    // Setup editor
+    function changeEnter() {
+        // If we already have an editor, let's destroy it first.
+        if (editor2)
+            editor2.destroy(true);
+
+        // Create the editor again, with the appropriate settings.
+        editor2 = CKEDITOR.replace('editor-enter', {
+            height: '400px',
+            extraPlugins: 'enterkey',
+            enterMode: Number(document.getElementById('xEnter').value),
+            shiftEnterMode: Number(document.getElementById('xShiftEnter').value)
+        });
+    }
+
+    // Run on indow load
+    window.onload = changeEnter;
+
+    // Change configuration
+    document.getElementById('xEnter').onchange=function(){changeEnter()}
+    document.getElementById('xShiftEnter').onchange=function(){changeEnter()}
+
+    // We are using Select2 selects here
+    $('.select').select2({
+        minimumResultsForSearch: Infinity
+    })
+
+
+
+    // Inline editor
+    // ------------------------------
+
+    // We need to turn off the automatic editor creation first
+    CKEDITOR.disableAutoInline = true;
+
+    // Attach editor to the area
+    var editor3 = CKEDITOR.inline('editor-inline');
+    
+});

assets/js/pages/editor_code.js

@@ -0,0 +1,83 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Ace code editor
+*
+*  Specific JS code additions for editor_code.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Javascript editor
+    var js_editor = ace.edit("javascript_editor");
+        js_editor.setTheme("ace/theme/monokai");
+        js_editor.getSession().setMode("ace/mode/javascript");
+        js_editor.setShowPrintMargin(false);
+
+
+    // HTML editor
+    var html_editor = ace.edit("html_editor");
+        html_editor.setTheme("ace/theme/monokai");
+        html_editor.getSession().setMode("ace/mode/html");
+        html_editor.setShowPrintMargin(false);
+
+
+    // CSS editor
+    var css_editor = ace.edit("css_editor");
+        css_editor.setTheme("ace/theme/monokai");
+        css_editor.getSession().setMode("ace/mode/css");
+        css_editor.setShowPrintMargin(false);
+
+
+    // JSON editor
+    var json_editor = ace.edit("json_editor");
+        json_editor.setTheme("ace/theme/monokai");
+        json_editor.getSession().setMode("ace/mode/json");
+        json_editor.setShowPrintMargin(false);
+
+
+    // LESS editor
+    var less_editor = ace.edit("less_editor");
+        less_editor.setTheme("ace/theme/monokai");
+        less_editor.getSession().setMode("ace/mode/less");
+        less_editor.setShowPrintMargin(false);
+
+
+    // PHP editor
+    var php_editor = ace.edit("php_editor");
+        php_editor.setTheme("ace/theme/monokai");
+        php_editor.getSession().setMode("ace/mode/php");
+        php_editor.setShowPrintMargin(false);
+
+
+    // Ruby editor
+    var ruby_editor = ace.edit("ruby_editor");
+        ruby_editor.setTheme("ace/theme/monokai");
+        ruby_editor.getSession().setMode("ace/mode/ruby");
+        ruby_editor.setShowPrintMargin(false);
+
+
+    // SASS editor
+    var sass_editor = ace.edit("sass_editor");
+        sass_editor.setTheme("ace/theme/monokai");
+        sass_editor.getSession().setMode("ace/mode/sass");
+        sass_editor.setShowPrintMargin(false);
+
+
+    // Coffee editor
+    var coffee_editor = ace.edit("coffee_editor");
+        coffee_editor.setTheme("ace/theme/monokai");
+        coffee_editor.getSession().setMode("ace/mode/coffee");
+        coffee_editor.setShowPrintMargin(false);
+
+
+    // Handlebars editor
+    var handlebars_editor = ace.edit("handlebars_editor");
+        handlebars_editor.setTheme("ace/theme/monokai");
+        handlebars_editor.getSession().setMode("ace/mode/handlebars");
+        handlebars_editor.setShowPrintMargin(false);
+
+});

assets/js/pages/editor_summernote.js

@@ -0,0 +1,65 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Summernote editor
+*
+*  Specific JS code additions for editor_summernote.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Basic editors
+    // ------------------------------
+
+    // Default initialization
+    $('.summernote').summernote();
+
+
+    // Control editor height
+    $('.summernote-height').summernote({
+        height: 400
+    });
+
+
+    // Air mode
+    $('.summernote-airmode').summernote({
+        airMode: true
+    });
+
+
+
+    // Click to edit
+    // ------------------------------
+
+    // Edit
+    $('#edit').on('click', function() {
+        $('.click2edit').summernote({focus: true});
+    })
+
+    // Save
+    $('#save').on('click', function() {
+        var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
+        $('.click2edit').destroy();
+    })
+
+
+
+    // Related form components
+    // ------------------------------
+
+    // Styled checkboxes/radios
+    $(".link-dialog input[type=checkbox], .note-modal-form input[type=radio]").uniform({
+        radioClass: 'choice'
+    });
+
+
+    // Styled file input
+    $(".note-image-input").uniform({
+        fileButtonClass: 'action btn bg-warning-400'
+    });
+
+});

assets/js/pages/editor_wysihtml5.js

@@ -0,0 +1,57 @@
+/* ------------------------------------------------------------------------------
+*
+*  # WYSIHTML5 editor
+*
+*  Specific JS code additions for editor_wysihtml5.html page
+*
+*  Version: 1.1
+*  Latest update: Jun 8, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Default initialization
+    $('.wysihtml5-default').wysihtml5({
+        parserRules:  wysihtml5ParserRules,
+        stylesheets: ["assets/css/components.css"]
+    });
+
+
+    // Simple toolbar
+    $('.wysihtml5-min').wysihtml5({
+        parserRules:  wysihtml5ParserRules,
+        stylesheets: ["assets/css/components.css"],
+        "font-styles": true, // Font styling, e.g. h1, h2, etc. Default true
+        "emphasis": true, // Italics, bold, etc. Default true
+        "lists": true, // (Un)ordered lists, e.g. Bullets, Numbers. Default true
+        "html": false, // Button which allows you to edit the generated HTML. Default false
+        "link": true, // Button to insert a link. Default true
+        "image": false, // Button to insert an image. Default true,
+        "action": false, // Undo / Redo buttons,
+        "color": true // Button to change color of font
+    });
+
+
+    // Editor events
+    $('.wysihtml5-init').on('click', function() {
+        $(this).off('click').addClass('disabled');
+        $('.wysihtml5-events').wysihtml5({
+            parserRules:  wysihtml5ParserRules,
+            stylesheets: ["assets/css/components.css"],
+            events: {
+                load: function() { 
+                    $.jGrowl('Editor has been loaded.', { theme: 'bg-slate-700', header: 'WYSIHTML5 loaded' });
+                },
+                change_view: function() {
+                    $.jGrowl('Editor view mode has been changed.', { theme: 'bg-slate-700', header: 'View mode' });
+                }
+            }
+        });
+    });
+
+
+    // Style form components
+    $('.styled').uniform();
+
+});

assets/js/pages/extension_blockui.js

@@ -0,0 +1,534 @@
+/* ------------------------------------------------------------------------------
+*
+*  # BlockUI extension
+*
+*  Specific JS code additions for extension_blockui.html page
+*
+*  Version: 1.1
+*  Latest update: Feb 5, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Page elements
+    // ------------------------------
+
+    // Block panel
+    $('#block-panel').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Block sidebar
+    $('#block-sidebar').on('click', function() {
+        var block = $('.sidebar');
+        $(block).block({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#1b2024',
+                opacity: 0.6,
+                cursor: 'wait'
+            },
+            centerY: 0, 
+            css: {
+            	top: '180px',
+                border: 0,
+                color: '#fff',
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Block page
+    $('#block-page').on('click', function() {
+        $.blockUI({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#1b2024',
+                opacity: 0.8,
+                zIndex: 1200,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                color: '#fff',
+                padding: 0,
+                zIndex: 1201,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+
+    // Overlays
+    // ------------------------------
+
+    // Basic overlay
+    $('#basic-overlay').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Custom overlay
+    $('#overlay-custom').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#0E8F92',
+                opacity: 0.9,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                color: '#fff',
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Overlay with custom color
+    $('#overlay-cover').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#3F9EC3',
+                opacity: 1,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                color: '#fff',
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Overlay without text
+    $('#no-message').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({
+        	message: null,
+        	timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // No overlay
+    $('#no-overlay').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({
+        	message: '<i class="icon-spinner4 spinner"></i>',
+        	showOverlay: false,
+        	timeout: 2000, //unblock after 2 seconds
+            css: {
+                border: 0,
+                padding: 15,
+                backgroundColor: '#283133',
+                color: '#fff',
+                width: 46,
+                height: 46,
+                lineHeight: 1,
+                '-webkit-border-radius': '2px', 
+                '-moz-border-radius': '2px', 
+                opacity: 0.95
+            }
+        });
+    });
+
+
+
+    // Messages
+    // ------------------------------
+
+    // Default message
+    $('#default-message').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({
+            message: '<span class="text-semibold">Please wait...</span>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Spinner only
+    $('#spinner-only').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Custom message
+    $('#custom-message').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({
+        	message: '<span class="text-semibold"><i class="icon-spinner4 spinner position-left"></i>&nbsp; Updating data</span>',
+        	timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: '10px 15px',
+                color: '#fff',
+                width: 'auto',
+                '-webkit-border-radius': 2,
+                '-moz-border-radius': 2,
+                backgroundColor: '#333'
+            }
+        });
+    });
+
+
+    // DOM message
+    $('#dom-message').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({
+        	message: $(this).next('.blockui-message'),
+        	timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+            	width: 'auto',
+                '-webkit-border-radius': 2,
+                '-moz-border-radius': 2,
+            	padding: 0,
+                border: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Multiple messages
+    $('#multiple-messages').on('click', function() {
+        var message = $(this).next('.blockui-message');
+        var block = $(this).parent();
+        $(block).block({ 
+            message: message,
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+            	width: 100,
+                '-webkit-border-radius': 2,
+                '-moz-border-radius': 2,
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            },
+            onBlock: function(){
+           		clearTimeout();
+           	}
+        });
+
+        window.setTimeout(function () {
+           message.html('<i class="icon-spinner4 spinner"></i> <span class="text-semibold display-block">Loading</span>')
+        }, 0); 
+
+        window.setTimeout(function () {
+           message.html('<i class="icon-spinner4 spinner"></i> <span class="text-semibold display-block">Please wait</span>')
+        }, 2000); 
+
+        window.setTimeout(function () {
+           message.addClass('bg-danger').html('<i class="icon-warning"></i> <span class="text-semibold display-block">Load error</span>')
+        }, 4000);
+
+        window.setTimeout(function () {
+           $(block).unblock({
+           	onUnblock: function(){
+           		message.removeClass('bg-danger');
+           	}
+           });
+        }, 6000);
+    });
+
+
+    // Custom message animation
+    $('#custom-message-animation').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({
+        	message: $('.blockui-animation-container'),
+        	timeout: 3000, //unblock after 3 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+            	width: 36,
+            	height: 36,
+            	color: '#fff',
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+
+        var animation = $(this).data("animation");
+        $('.blockui-animation-container').addClass("animated " + animation).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
+            $(this).removeClass("animated " + animation);
+        });
+    });
+
+
+    // Custom message position
+    $('#custom-position').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            centerX: 0,
+            centerY: 0,
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                width: 16,
+                top: '15px',
+                left: '',
+                right: '15px',
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+
+    // Unblock options
+    // ------------------------------
+
+    // Auto unblock
+    $('#auto-unblock').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+    });
+
+
+    // Unblock on click
+    $('#click-unblock').on('click', function() {
+        var block = $(this).parent();
+        $(block).block({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#fff',
+                opacity: 0.8,
+                cursor: 'wait'
+            },
+            css: {
+            	width: 16,
+                border: 0,
+                padding: 0,
+                backgroundColor: 'transparent'
+            }
+        });
+
+        $('.blockOverlay').on('click', function() {
+        	$(block).unblock();
+        });
+    });
+
+
+
+    // Callbacks
+    // ------------------------------
+
+    // Block callback
+    $('#block-callback').on('click', function() {
+        $.blockUI({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            fadeIn: 800, 
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#1b2024',
+                opacity: 0.8,
+                zIndex: 1200,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                color: '#fff',
+                zIndex: 1201,
+                padding: 0,
+                backgroundColor: 'transparent'
+            },
+            onBlock: function() { 
+                alert('Page is now blocked. FadeIn completed.'); 
+            } 
+        });
+    });
+
+
+    // Unblock callback
+    $('#unblock-callback').on('click', function() {
+        $.blockUI({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            timeout: 2000, //unblock after 2 seconds
+            overlayCSS: {
+                backgroundColor: '#1b2024',
+                opacity: 0.8,
+                zIndex: 1200,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                color: '#fff',
+                padding: 0,
+                zIndex: 1201,
+                backgroundColor: 'transparent'
+            },
+            onUnblock: function() { 
+                alert('Page is now unblocked. FadeOut completed.'); 
+            } 
+        });
+    });
+
+
+    // Overlay callback
+    $('#overlay-callback').on('click', function() {
+        $.blockUI({ 
+            message: '<i class="icon-spinner4 spinner"></i>',
+            overlayCSS: {
+                backgroundColor: '#1b2024',
+                opacity: 0.8,
+                zIndex: 1200,
+                cursor: 'wait'
+            },
+            css: {
+                border: 0,
+                color: '#fff',
+                padding: 0,
+                zIndex: 1201,
+                backgroundColor: 'transparent'
+            },
+            onOverlayClick: $.unblockUI
+        });
+    });
+
+
+
+    // Other options
+    // ------------------------------
+
+    // Growl notification
+    $('#growl').on('click', function() {
+        $.blockUI({ 
+            message: $('.blockui-growl'), 
+            fadeIn: 700, 
+            fadeOut: 700, 
+            timeout: 3000000, //unblock after 3 seconds
+            showOverlay: false, 
+            centerY: false, 
+            css: { 
+                width: '250px',
+                backgroundColor: 'transparent',
+                top: '20px',
+                left: 'auto',
+                right: '20px',
+                border: 0,
+                opacity: .95,
+                zIndex: 1200,
+            } 
+        }); 
+    });
+
+});

assets/js/pages/extension_dnd.js

@@ -0,0 +1,135 @@
+/* ------------------------------------------------------------------------------
+*
+*  #Dragula - drag and drop library
+*
+*  Specific JS code additions for extension_dnd.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Dragula
+    // ------------------------------
+
+    // Draggable panels
+    dragula([document.getElementById('panels-target-left'), document.getElementById('panels-target-right')]);
+
+
+    // Draggable forms
+    dragula([document.getElementById('forms-target-left'), document.getElementById('forms-target-right')]);
+
+
+    // Draggable media lists
+    dragula([document.getElementById('media-list-target-left'), document.getElementById('media-list-target-right')], {
+        mirrorContainer: document.querySelector('.media-list-container'),
+        moves: function (el, container, handle) {
+            return handle.classList.contains('dragula-handle');
+        }
+    });
+
+
+    //
+    // Dropdown menu items
+    //
+
+    // Define containers
+    var containers = $('.dropdown-menu-sortable').toArray();
+
+    // Init dragula
+    dragula(containers, {
+            mirrorContainer: document.querySelector('.dropdown-menu-sortable')
+    });
+
+
+    //
+    // Draggable tabs
+    //
+
+    // Basic tabs
+    dragula([document.getElementById('tabs-target-left')], {
+        mirrorContainer: document.querySelector('#tabs-target-left')
+    });
+
+    // Basic justified
+    dragula([document.getElementById('tabs-target-right')], {
+        mirrorContainer: document.querySelector('#tabs-target-right')
+    });
+
+    // Colored tabs
+    dragula([document.getElementById('tabs-solid-target-left')], {
+        mirrorContainer: document.querySelector('#tabs-solid-target-left')
+    });
+
+    // Colored justified
+    dragula([document.getElementById('tabs-solid-target-right')], {
+        mirrorContainer: document.querySelector('#tabs-solid-target-right')
+    });
+
+
+    //
+    // Draggable pills
+    //
+
+    // Basic pills
+    dragula([document.getElementById('pills-target-left')], {
+        mirrorContainer: document.querySelector('#pills-target-left')
+    });
+
+    // Basic justified
+    dragula([document.getElementById('pills-target-right')], {
+        mirrorContainer: document.querySelector('#pills-target-right')
+    });
+
+    // Toolbar pills
+    dragula([document.getElementById('pills-toolbar-target-left')], {
+        mirrorContainer: document.querySelector('#pills-toolbar-target-left')
+    });
+
+    // Toolbar justified
+    dragula([document.getElementById('pills-toolbar-target-right')], {
+        mirrorContainer: document.querySelector('#pills-toolbar-target-right')
+    });
+
+
+    //
+    // Accordion and collapsible
+    //
+
+    // Accordion
+    dragula([document.getElementById('accordion-target')], {
+        mirrorContainer: document.getElementById('accordion-target')
+    });
+
+    // Collapsible
+    dragula([document.getElementById('collapsible-target')], {
+        mirrorContainer: document.getElementById('collapsible-target')
+    });
+
+
+
+    // Select2 select
+    // ------------------------------
+
+    // Basic
+    $('.select').select2();
+    
+
+
+    // Styled form components
+    // ------------------------------
+
+    // Checkboxes, radios
+    $(".styled").uniform({
+        radioClass: 'choice'
+    });
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-warning-400'
+    });
+
+});

assets/js/pages/extension_image_cropper.js

@@ -0,0 +1,326 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Image Cropper extension
+*
+*  Specific JS code additions for extension_image_cropper.html page
+*
+*  Version: 1.1
+*  Latest update: Jul 5, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Basic setup
+    // ------------------------------
+
+    // Default initialization
+    $('.crop-basic').cropper();
+
+
+    // Hidden overlay
+    $('.crop-modal').cropper({
+        modal: false
+    });
+
+
+    // Fixed position
+    $('.crop-not-movable').cropper({
+        cropBoxMovable: false,
+        data: {
+            x: 75,
+            y: 50,
+            width: 350,
+            height: 250
+        }
+    });
+
+
+    // Fixed size
+    $('.crop-not-resizable').cropper({
+        cropBoxResizable: false,
+        data: {
+            x: 10,
+            y: 10,
+            width: 300,
+            height: 300
+        }
+    });
+
+
+    // Disabled autocrop
+    $('.crop-auto').cropper({
+        autoCrop: false 
+    });
+
+
+    // Disabled drag
+    $('.crop-drag').cropper({
+        movable: false 
+    });
+
+
+    // 16:9 ratio
+    $('.crop-16-9').cropper({
+        aspectRatio: 16/9
+    });
+
+
+    // 4:3 ratio
+    $('.crop-4-3').cropper({
+        aspectRatio: 4/3
+    });
+
+
+    // Minimum zone size
+    $('.crop-min').cropper({
+        minCropBoxWidth: 150,
+        minCropBoxHeight: 150
+    });
+
+
+    // Disabled zoom
+    $('.crop-zoomable').cropper({
+        zoomable: false
+    });
+
+
+    
+    // Demo cropper
+    // ------------------------------
+
+    // Define variables
+    var $cropper = $(".cropper"),
+        $image = $('#demo-cropper-image'),
+        $download = $('#download'),
+        $dataX = $('#dataX'),
+        $dataY = $('#dataY'),
+        $dataHeight = $('#dataHeight'),
+        $dataWidth = $('#dataWidth'),
+        $dataScaleX = $('#dataScaleX'),
+        $dataScaleY = $('#dataScaleY'),
+        options = {
+            aspectRatio: 1,
+            preview: '.preview',
+            crop: function (e) {
+                $dataX.val(Math.round(e.x));
+                $dataY.val(Math.round(e.y));
+                $dataHeight.val(Math.round(e.height));
+                $dataWidth.val(Math.round(e.width));
+                $dataScaleX.val(e.scaleX);
+                $dataScaleY.val(e.scaleY);
+            }
+        };
+
+    // Initialize cropper with options
+    $cropper.cropper(options);
+
+
+    //
+    // Toolbar
+    //
+
+    $('.demo-cropper-toolbar').on('click', '[data-method]', function () {
+        var $this = $(this),
+            data = $this.data(),
+            $target,
+            result;
+
+        if ($image.data('cropper') && data.method) {
+            data = $.extend({}, data);
+
+            if (typeof data.target !== 'undefined') {
+                $target = $(data.target);
+
+                if (typeof data.option === 'undefined') {
+                    data.option = JSON.parse($target.val());
+                }
+            }
+
+            result = $image.cropper(data.method, data.option, data.secondOption);
+
+            switch (data.method) {
+                case 'scaleX':
+                case 'scaleY':
+                    $(this).data('option', -data.option);
+                break;
+
+                case 'getCroppedCanvas':
+                    if (result) {
+
+                        // Init modal
+                        $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
+
+                        // Download image
+                        $download.attr('href', result.toDataURL('image/jpeg'));
+                    }
+                break;
+            }
+        }
+    });
+
+
+    //
+    // Aspect ratio
+    //
+
+    $('.demo-cropper-ratio').on('change', 'input[type=radio]', function () {
+        options[$(this).attr('name')] = $(this).val();
+        $image.cropper('destroy').cropper(options);
+    });
+
+
+    //
+    // Switching modes
+    //
+
+    // Crop and clear
+    var cropClear = document.querySelector('.clear-crop-switch');
+    var cropClearInit = new Switchery(cropClear);
+    cropClear.onchange = function() {
+        if(cropClear.checked) {
+
+            // Crop mode
+            $cropper.cropper('crop');
+
+            // Enable other options
+            enableDisableInit.enable();
+            destroyCreateInit.enable();
+        }
+        else {
+
+            // Clear move
+            $cropper.cropper('clear');
+
+            // Disable other options
+            enableDisableInit.disable();
+            destroyCreateInit.disable();
+        }
+    };
+
+    // Enable and disable
+    var enableDisable = document.querySelector('.enable-disable-switch');
+    var enableDisableInit = new Switchery(enableDisable);
+    enableDisable.onchange = function() {
+        if(enableDisable.checked) {
+
+            // Enable cropper
+            $cropper.cropper('enable');
+
+            // Enable other options
+            cropClearInit.enable();
+            destroyCreateInit.enable();
+        }
+        else {
+
+            // Disable cropper
+            $cropper.cropper('disable');
+
+            // Disable other options
+            cropClearInit.disable();
+            destroyCreateInit.disable();
+        }
+    };
+
+    // Destroy and create
+    var destroyCreate = document.querySelector('.destroy-create-switch');
+    var destroyCreateInit = new Switchery(destroyCreate);
+    destroyCreate.onchange = function() {
+        if(destroyCreate.checked) {
+
+            // Initialize again
+            $cropper.cropper({
+                aspectRatio: 1,
+                preview: ".preview",
+                data: {
+                    x: 208,
+                    y: 22
+                }
+            });
+
+            // Enable other options
+            cropClearInit.enable();
+            enableDisableInit.enable();
+        }
+        else {
+
+            // Destroy cropper
+            $cropper.cropper('destroy');
+            
+            // Disable other options
+            cropClearInit.disable();
+            enableDisableInit.disable();
+        }
+    };
+
+
+    //
+    // Methods
+    //
+
+    // Get data
+    $("#getData").on('click', function() {
+        $("#showData1").val(JSON.stringify($cropper.cropper("getData")));
+    });
+
+    // Set data
+    $("#setData").on('click', function() {
+        $cropper.cropper("setData", {
+            x: 291,
+            y: 86,
+            width: 158,
+            height: 158
+        });
+
+        $("#showData1").val('Image data has been changed');
+    });
+
+
+    // Get container data
+    $("#getContainerData").on('click', function() {
+        $("#showData2").val(JSON.stringify($cropper.cropper("getContainerData")));
+    });
+
+    // Get image data
+    $("#getImageData").on('click', function() {
+        $("#showData2").val(JSON.stringify($cropper.cropper("getImageData")));
+    });
+
+
+    // Get canvas data
+    $("#getCanvasData").on('click', function() {
+        $("#showData3").val(JSON.stringify($cropper.cropper("getCanvasData")));
+    });
+
+    // Set canvas data
+    $("#setCanvasData").on('click', function() {
+        $cropper.cropper("setCanvasData", {
+            left: -50,
+            top: 0,
+            width: 750,
+            height: 750
+        });
+
+        $("#showData3").val('Canvas data has been changed');
+    });
+
+
+    // Get crop box data
+    $("#getCropBoxData").on('click', function() {
+        $("#showData4").val(JSON.stringify($cropper.cropper("getCropBoxData")));
+    });
+
+    // Set crop box data
+    $("#setCropBoxData").on('click', function() {
+        $cropper.cropper("setCropBoxData", {
+            left: 395,
+            top: 68,
+            width: 183,
+            height: 183
+        });
+
+        $("#showData4").val('Crop box data has been changed');
+    });
+
+});

assets/js/pages/extra_context_menu.js

@@ -0,0 +1,82 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Context menu
+*
+*  Specific JS code additions for extra_context_menu.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Basic setup
+    // ------------------------------
+
+    // Initialize using JS
+    $('.context-js').contextmenu({
+        target: '.context-js-menu'
+    });
+
+
+    // Exclude elements
+    $('.context-deactivate').contextmenu({
+        target: '.context-deactivate-menu',
+        before: function (e, element, target) {
+            e.preventDefault();
+            if (e.target.tagName == 'CODE') {
+                e.preventDefault();
+                this.closemenu();
+                return false;
+            }
+            return true;
+        }
+    });
+
+
+    // Dynamic replacement
+    $('.context-dynamic').contextmenu({
+        target: '.context-dynamic-menu',
+        before: function(e) { 
+            this.getMenu().find('li').eq(2).find('a').html('<i class="icon-stack"></i> Item has been changed');
+            return true;
+        }
+    });
+
+
+    // Name on selection
+    $('.context-selection').contextmenu({
+        target: '.context-selection-menu',
+        onItem: function(context, e) {
+            alert($(e.target).text());
+        }
+    });
+
+
+
+    // Callbacks
+    // ------------------------------
+
+    // onShow callback
+    $('.context-show-menu').on('show.bs.context',function () {
+        alert('onShow event fired');
+    });
+
+    // onShown callback
+    $('.context-shown-menu').on('shown.bs.context',function () {
+        alert('onShown event fired');
+    });
+
+    // onHide callback
+    $('.context-hide-menu').on('hide.bs.context',function () {
+        alert('onHide event fired');
+    });
+
+    // onHidden callback
+    $('.context-hidden-menu').on('hidden.bs.context',function () {
+        alert('onHidden event fired');
+    });
+    
+});

assets/js/pages/extra_fab.js

@@ -0,0 +1,46 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Session timeout
+*
+*  Specific JS code additions for extra_session_timeout.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Add bottom spacing if reached bottom,
+    // to avoid footer overlapping
+    // -------------------------
+    
+    $(window).scroll(function() {
+        if($(window).scrollTop() + $(window).height() > $(document).height() - 40) {
+            $('.fab-menu-bottom-left, .fab-menu-bottom-right').addClass('reached-bottom');
+        }
+        else {
+            $('.fab-menu-bottom-left, .fab-menu-bottom-right').removeClass('reached-bottom');
+        }
+    });
+
+
+    // Affix
+    // -------------------------
+
+    // Left alignment
+    $('#fab-menu-affixed-demo-left').affix({
+        offset: {
+            top: $('#fab-menu-affixed-demo-left').offset().top - 20
+        }
+    });
+
+    // Right alignment
+    $('#fab-menu-affixed-demo-right').affix({
+        offset: {
+            top: $('#fab-menu-affixed-demo-right').offset().top - 20
+        }
+    });
+
+});

assets/js/pages/extra_fullcalendar.js

@@ -0,0 +1,290 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Fullcalendar basic options
+*
+*  Specific JS code additions for extra_fullcalendar_views.html and 
+*  extra_fullcalendar_styling.html pages
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Add events
+    // ------------------------------
+
+    // Default events
+    var events = [
+        {
+            title: 'All Day Event',
+            start: '2014-11-01'
+        },
+        {
+            title: 'Long Event',
+            start: '2014-11-07',
+            end: '2014-11-10'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-09T16:00:00'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-16T16:00:00'
+        },
+        {
+            title: 'Conference',
+            start: '2014-11-11',
+            end: '2014-11-13'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T10:30:00',
+            end: '2014-11-12T12:30:00'
+        },
+        {
+            title: 'Lunch',
+            start: '2014-11-12T12:00:00'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T14:30:00'
+        },
+        {
+            title: 'Happy Hour',
+            start: '2014-11-12T17:30:00'
+        },
+        {
+            title: 'Dinner',
+            start: '2014-11-12T20:00:00'
+        },
+        {
+            title: 'Birthday Party',
+            start: '2014-11-13T07:00:00'
+        },
+        {
+            title: 'Click for Google',
+            url: 'http://google.com/',
+            start: '2014-11-28'
+        }
+    ];
+
+
+    // Event colors
+    var eventColors = [
+        {
+            title: 'All Day Event',
+            start: '2014-11-01',
+            color: '#EF5350'
+        },
+        {
+            title: 'Long Event',
+            start: '2014-11-07',
+            end: '2014-11-10',
+            color: '#26A69A'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-09T16:00:00',
+            color: '#26A69A'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-16T16:00:00',
+            color: '#5C6BC0'
+        },
+        {
+            title: 'Conference',
+            start: '2014-11-11',
+            end: '2014-11-13',
+            color: '#546E7A'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T10:30:00',
+            end: '2014-11-12T12:30:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Lunch',
+            start: '2014-11-12T12:00:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T14:30:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Happy Hour',
+            start: '2014-11-12T17:30:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Dinner',
+            start: '2014-11-12T20:00:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Birthday Party',
+            start: '2014-11-13T07:00:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Click for Google',
+            url: 'http://google.com/',
+            start: '2014-11-28',
+            color: '#FF7043'
+        }
+    ];
+
+
+    // Event background colors
+    var eventBackgroundColors = [
+        {
+            title: 'All Day Event',
+            start: '2014-11-01'
+        },
+        {
+            title: 'Long Event',
+            start: '2014-11-07',
+            end: '2014-11-10',
+            color: '#DCEDC8',
+            rendering: 'background'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-06T16:00:00'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-16T16:00:00'
+        },
+        {
+            title: 'Conference',
+            start: '2014-11-11',
+            end: '2014-11-13'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T10:30:00',
+            end: '2014-11-12T12:30:00'
+        },
+        {
+            title: 'Lunch',
+            start: '2014-11-12T12:00:00'
+        },
+        {
+            title: 'Happy Hour',
+            start: '2014-11-12T17:30:00'
+        },
+        {
+            title: 'Dinner',
+            start: '2014-11-24T20:00:00'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-03T10:00:00'
+        },
+        {
+            title: 'Birthday Party',
+            start: '2014-11-13T07:00:00'
+        },
+        {
+            title: 'Vacation',
+            start: '2014-11-27',
+            end: '2014-11-30',
+            color: '#FFCCBC',
+            rendering: 'background'
+        }
+    ];
+
+
+
+    // Initialization
+    // ------------------------------
+
+    // Basic view
+    $('.fullcalendar-basic').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,basicWeek,basicDay'
+        },
+        defaultDate: '2014-11-12',
+        editable: true,
+        events: events
+    });
+
+
+    // Agenda view
+    $('.fullcalendar-agenda').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+        },
+        defaultDate: '2014-11-12',
+        defaultView: 'agendaWeek',
+        editable: true,
+        businessHours: true,
+        events: events
+    });
+
+
+    // List view
+    $('.fullcalendar-list').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'listDay,listWeek,listMonth'
+        },
+        views: {
+            listDay: { buttonText: 'Day' },
+            listWeek: { buttonText: 'Week' },
+            listMonth: { buttonText: 'Month' }
+        },
+        defaultView: 'listMonth',
+        defaultDate: '2014-11-12',
+        navLinks: true, // can click day/week names to navigate views
+        editable: true,
+        eventLimit: true, // allow "more" link when too many events
+        events: events
+    });
+
+
+    // Event colors
+    $('.fullcalendar-event-colors').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+        },
+        defaultDate: '2014-11-12',
+        editable: true,
+        events: eventColors
+    });
+
+
+    // Event background colors
+    $('.fullcalendar-background-colors').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+        },
+        defaultDate: '2014-11-12',
+        editable: true,
+        events: eventBackgroundColors
+    });
+
+});

assets/js/pages/extra_fullcalendar_advanced.js

@@ -0,0 +1,216 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Fullcalendar advanced options
+*
+*  Specific JS code additions for extra_fullcalendar_advanced.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Add events
+    // ------------------------------
+
+    // Default events
+    var events = [
+        {
+            title: 'All Day Event',
+            start: '2014-11-01'
+        },
+        {
+            title: 'Long Event',
+            start: '2014-11-07',
+            end: '2014-11-10'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-09T16:00:00'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-16T16:00:00'
+        },
+        {
+            title: 'Conference',
+            start: '2014-11-11',
+            end: '2014-11-13'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T10:30:00',
+            end: '2014-11-12T12:30:00'
+        },
+        {
+            title: 'Lunch',
+            start: '2014-11-12T12:00:00'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T14:30:00'
+        },
+        {
+            title: 'Happy Hour',
+            start: '2014-11-12T17:30:00'
+        },
+        {
+            title: 'Dinner',
+            start: '2014-11-12T20:00:00'
+        },
+        {
+            title: 'Birthday Party',
+            start: '2014-11-13T07:00:00'
+        },
+        {
+            title: 'Click for Google',
+            url: 'http://google.com/',
+            start: '2014-11-28'
+        }
+    ];
+
+
+    // Event colors
+    var eventColors = [
+        {
+            title: 'All Day Event',
+            start: '2014-11-01',
+            color: '#EF5350'
+        },
+        {
+            title: 'Long Event',
+            start: '2014-11-07',
+            end: '2014-11-10',
+            color: '#26A69A'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-09T16:00:00',
+            color: '#26A69A'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-16T16:00:00',
+            color: '#5C6BC0'
+        },
+        {
+            title: 'Conference',
+            start: '2014-11-11',
+            end: '2014-11-13',
+            color: '#546E7A'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T10:30:00',
+            end: '2014-11-12T12:30:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Lunch',
+            start: '2014-11-12T12:00:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T14:30:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Happy Hour',
+            start: '2014-11-12T17:30:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Dinner',
+            start: '2014-11-12T20:00:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Birthday Party',
+            start: '2014-11-13T07:00:00',
+            color: '#546E7A'
+        },
+        {
+            title: 'Click for Google',
+            url: 'http://google.com/',
+            start: '2014-11-28',
+            color: '#FF7043'
+        }
+    ];
+
+
+
+    // External events
+    // ------------------------------
+
+    // Add switcher for events removal
+    var remove = document.querySelector('.switch');
+    var removeInit = new Switchery(remove);
+
+
+    // Initialize the calendar
+    $('.fullcalendar-external').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+        },
+        editable: true,
+        defaultDate: '2014-11-12',
+        events: eventColors,
+        locale: 'en',
+        droppable: true, // this allows things to be dropped onto the calendar
+            drop: function() {
+            if ($('#drop-remove').is(':checked')) { // is the "remove after drop" checkbox checked?
+                $(this).remove(); // if so, remove the element from the "Draggable Events" list
+            }
+        }
+    });
+
+
+    // Initialize the external events
+    $('#external-events .fc-event').each(function() {
+
+        // Different colors for events
+        $(this).css({'backgroundColor': $(this).data('color'), 'borderColor': $(this).data('color')});
+
+        // Store data so the calendar knows to render an event upon drop
+        $(this).data('event', {
+            title: $.trim($(this).html()), // use the element's text as the event title
+            color: $(this).data('color'),
+            stick: true // maintain when user navigates (see docs on the renderEvent method)
+        });
+
+        // Make the event draggable using jQuery UI
+        $(this).draggable({
+            zIndex: 999,
+            revert: true, // will cause the event to go back to its
+            revertDuration: 0 // original position after the drag
+        });
+    });
+
+
+
+    // RTL direction
+    // ------------------------------
+
+    $('.fullcalendar-rtl').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+        },
+        defaultDate: '2014-11-12',
+        editable: true,
+        isRTL: true,
+        locale: 'ar',
+        events: events
+    });
+    
+});

assets/js/pages/extra_fullcalendar_formats.js

@@ -0,0 +1,214 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Fullcalendar time and language options
+*
+*  Specific JS code additions for extra_fullcalendar_formats.html page
+*
+*  Version: 1.1
+*  Latest update: Mar 20, 2017
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Add events
+    // ------------------------------
+
+    // Default events
+    var events = [
+        {
+            title: 'All Day Event',
+            start: '2014-11-01'
+        },
+        {
+            title: 'Long Event',
+            start: '2014-11-07',
+            end: '2014-11-10'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-09T16:00:00'
+        },
+        {
+            id: 999,
+            title: 'Repeating Event',
+            start: '2014-11-16T16:00:00'
+        },
+        {
+            title: 'Conference',
+            start: '2014-11-11',
+            end: '2014-11-13'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T10:30:00',
+            end: '2014-11-12T12:30:00'
+        },
+        {
+            title: 'Lunch',
+            start: '2014-11-12T12:00:00'
+        },
+        {
+            title: 'Meeting',
+            start: '2014-11-12T14:30:00'
+        },
+        {
+            title: 'Happy Hour',
+            start: '2014-11-12T17:30:00'
+        },
+        {
+            title: 'Dinner',
+            start: '2014-11-12T20:00:00'
+        },
+        {
+            title: 'Birthday Party',
+            start: '2014-11-13T07:00:00'
+        },
+        {
+            title: 'Click for Google',
+            url: 'http://google.com/',
+            start: '2014-11-28'
+        }
+    ];
+
+
+
+    // Date formats
+    // ------------------------------
+
+    $('.fullcalendar-formats').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,basicWeek,basicDay'
+        },
+        views: {
+            month: {
+                titleFormat: 'LL',
+                columnFormat: 'dddd'
+            },
+            week: {
+                titleFormat: 'MMM Do YY',
+                columnFormat: 'ddd D'
+            },
+            day: {
+                titleFormat: 'dddd',
+                columnFormat: 'dddd'
+            }
+        },
+        timeFormat: 'H:mm', // uppercase H for 24-hour clock
+        defaultDate: '2014-11-12',
+        editable: true,
+        events: events
+    });
+
+
+
+    // Internationalization
+    // ------------------------------
+
+    // Set default language
+    var initialLocaleCode = 'en';
+
+
+    // Build the language selector's options
+    $.each($.fullCalendar.locales, function(localeCode) {
+        $('#lang-selector').append(
+            $('<option/>')
+            .attr('value', localeCode)
+            .prop('selected', localeCode == initialLocaleCode)
+            .text(localeCode)
+        );
+    });
+
+
+    // Re-render the calendar when the selected option changes
+    $('#lang-selector').on('change', function() {
+        if (this.value) {
+            $('.fullcalendar-languages').fullCalendar('option', 'locale', this.value);
+        }
+    });
+
+
+    // Render calendar
+    $('.fullcalendar-languages').fullCalendar({
+        header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay,listMonth'
+        },
+        defaultDate: '2014-11-12',
+        locale: initialLocaleCode,
+        buttonIcons: false, // show the prev/next text
+        weekNumbers: true,
+        editable: true,
+        events: [
+            {
+                title: 'All Day Event',
+                start: '2014-11-01'
+            },
+            {
+                title: 'Long Event',
+                start: '2014-11-07',
+                end: '2014-11-10'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2014-11-09T16:00:00'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2014-11-16T16:00:00'
+            },
+            {
+                title: 'Conference',
+                start: '2014-11-11',
+                end: '2014-11-13'
+            },
+            {
+                title: 'Meeting',
+                start: '2014-11-12T10:30:00',
+                end: '2014-11-12T12:30:00'
+            },
+            {
+                title: 'Lunch',
+                start: '2014-11-12T12:00:00'
+            },
+            {
+                title: 'Meeting',
+                start: '2014-11-12T14:30:00'
+            },
+            {
+                title: 'Happy Hour',
+                start: '2014-11-12T17:30:00'
+            },
+            {
+                title: 'Dinner',
+                start: '2014-11-12T20:00:00'
+            },
+            {
+                title: 'Birthday Party',
+                start: '2014-11-13T07:00:00'
+            },
+            {
+                title: 'Click for Google',
+                url: 'http://google.com/',
+                start: '2014-11-28'
+            }
+        ]
+    });
+
+
+    // We're using Select2 for language select
+    $('.select').select2({
+        width: 100,
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-slate-700',
+        dropdownCssClass: 'bg-slate-700'
+    });
+    
+});

assets/js/pages/extra_idle_timeout.js

@@ -0,0 +1,26 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Session timeout
+*
+*  Specific JS code additions for extra_session_timeout.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // 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'
+    });
+    
+});

assets/js/pages/extra_session_timeout.js

@@ -0,0 +1,27 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Idle timeout
+*
+*  Specific JS code additions for extra_idle_timeout.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // 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'
+    });
+    
+});

assets/js/pages/extra_sliders_ion.js

@@ -0,0 +1,443 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Ion Range Sliders
+*
+*  Specific JS code additions for extra_sliders_ion.html page
+*
+*  Version: 1.0
+*  Latest update: Nov 20, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Basic examples
+    // ------------------------------
+
+    // Basic slider
+    $("#ion-basic").ionRangeSlider();
+
+    // Set start point
+    $("#ion-start").ionRangeSlider({
+        min: 100,
+        max: 1000,
+        from: 550
+    });
+
+    // Basic range slider
+    $("#ion-range").ionRangeSlider({
+        type: "double",
+        min: 0,
+        max: 1000,
+        from: 200,
+        to: 800
+    });
+
+
+    // Range with negative values
+    $("#ion-negative").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: -1000,
+        max: 1000,
+        from: -500,
+        to: 500
+    });
+
+    // Custom stepping
+    $("#ion-step").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: -1000,
+        max: 1000,
+        from: -500,
+        to: 500,
+        step: 250
+    });
+
+    // Fractional step
+    $("#ion-fractional").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: -12.8,
+        max: 12.8,
+        from: -3.2,
+        to: 3.2,
+        step: 0.1
+    });
+
+
+
+    // Customizing values
+    // ------------------------------
+
+    // Custom number values
+    $("#ion-custom-numbers").ionRangeSlider({
+        type: "double",
+        grid: true,
+        from: 2,
+        to: 5,
+        values: [0, 5, 10, 20, 35, 50, 70, 100]
+    });
+
+    // Custom value names
+    $("#ion-custom-strings").ionRangeSlider({
+        grid: true,
+        from: 5,
+        values: [
+            "zero", "one",
+            "two", "three",
+            "four", "five",
+            "six", "seven",
+            "eight", "nine",
+            "ten"
+        ]
+    });
+
+    // Months values
+    $("#ion-custom-months").ionRangeSlider({
+        grid: true,
+        from: 3,
+        values: [
+            "Jan", "Feb", "Mar",
+            "Apr", "May", "Jun",
+            "Jul", "Aug", "Sep",
+            "Oct", "Nov", "Dec"
+        ]
+    });
+
+
+    // Disable number prettify
+    $("#ion-numbers-no-prettify").ionRangeSlider({
+        grid: true,
+        min: 1000,
+        max: 10000,
+        from: 3000,
+        step: 100,
+        prettify_enabled: false
+    });
+
+    // Enable number prettify
+    $("#ion-numbers-prettify").ionRangeSlider({
+        grid: true,
+        min: 1000,
+        max: 10000,
+        from: 3000,
+        step: 100,
+        prettify_enabled: true
+    });
+
+    // Custom number separator
+    $("#ion-custom-separator").ionRangeSlider({
+        grid: true,
+        min: 1000,
+        max: 10000,
+        from: 3000,
+        step: 100,
+        prettify_enabled: true,
+        prettify_separator: ","
+    });
+
+
+
+    // Decorating numbers
+    // ------------------------------
+
+    // Numbers with prefix
+    $("#ion-custom-prefix").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: 0,
+        max: 1000,
+        from: 250,
+        to: 750,
+        step: 50,
+        prefix: "$"
+    });
+
+    // Numbers with postfix
+    $("#ion-custom-postfix").ionRangeSlider({
+        type: "double",
+        grid: true,
+        min: 0,
+        max: 1000,
+        from: 250,
+        to: 750,
+        step: 50,
+        postfix: "°"
+    });
+
+    // Max number without limit
+    $("#ion-max-no-limit").ionRangeSlider({
+        grid: true,
+        min: 18,
+        max: 70,
+        from: 40,
+        prefix: "Age ",
+        max_postfix: "+"
+    });
+
+
+    // Decorate both values
+    $("#ion-decorate-both").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 100,
+        max: 200,
+        from: 145,
+        to: 155,
+        prefix: "HDD: ",
+        postfix: " Gb",
+        decorate_both: true
+    });
+
+    // Decoration separator
+    $("#ion-decorate-both-custom").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 100,
+        max: 200,
+        from: 145,
+        to: 155,
+        prefix: "HDD: ",
+        postfix: " Gb",
+        values_separator: " → "
+    });
+
+    // Remove decoration
+    $("#ion-decorate-both-remove").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 100,
+        max: 200,
+        from: 145,
+        to: 155,
+        prefix: "HDD: ",
+        postfix: " Gb",
+        decorate_both: false
+    });
+
+
+
+    // Advanced examples
+    // ------------------------------
+
+    // Values inside container
+    $("#ion-force-edges").ionRangeSlider({
+        type: "double",
+        min: 1000000,
+        max: 2000000,
+        grid: true,
+        force_edges: true
+    });
+
+    // Disabled slider
+    $("#ion-disabled").ionRangeSlider({
+        grid: true,
+        min: 0,
+        max: 100,
+        from: 30,
+        disable: true
+    });
+
+    // Keyboard controls
+    $("#ion-keyboard").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 0,
+        max: 100,
+        from: 30,
+        to: 70,
+        keyboard: true,
+        keyboard_step: 5
+    });
+
+
+    // Grid values density
+    $("#ion-grid-values").ionRangeSlider({
+        type: "double",
+        min: 0,
+        max: 100,
+        from: 30,
+        to: 70,
+        grid: true,
+        grid_num: 20
+    });
+
+    // Attach values to steps
+    $("#ion-grid-snap").ionRangeSlider({
+        type: "double",
+        min: 0,
+        max: 1000,
+        step: 100,
+        grid: true,
+        grid_snap: true
+    });
+
+    // Attach values to fractional steps
+    $("#ion-grid-snap-fractional").ionRangeSlider({
+        type: "single",
+        min: 0,
+        max: 10,
+        from: 4.68,
+        step: 2.34,
+        grid: true,
+        grid_snap: true
+    });
+
+
+
+    // Manipulations
+    // ------------------------------
+
+    // Minimum interval size
+    $("#ion-interval-min").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 0,
+        max: 100,
+        from: 30,
+        to: 70,
+        min_interval: 20
+    });
+
+    // Maximum interval size
+    $("#ion-interval-max").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 0,
+        max: 100,
+        from: 30,
+        to: 70,
+        max_interval: 50
+    });
+
+    // Dragging interval
+    $("#ion-interval-drag").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 0,
+        max: 100,
+        from: 30,
+        to: 70,
+        drag_interval: true
+    });
+
+
+    // Lock left handle
+    $("#ion-lock-from").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 0,
+        max: 1000,
+        from: 250,
+        to: 750,
+        from_fixed: true
+    });
+
+    // Lock right handle
+    $("#ion-lock-to").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 0,
+        max: 1000,
+        from: 250,
+        to: 750,
+        to_fixed: true
+    });
+
+    // Lock both handles
+    $("#ion-lock-both").ionRangeSlider({
+        grid: true,
+        type: "double",
+        min: 0,
+        max: 1000,
+        from: 250,
+        to: 750,
+        from_fixed: true,
+        to_fixed: true
+    });
+
+
+
+    // Other examples
+    // ------------------------------
+
+    // Movement limit
+    $("#ion-movement-limit").ionRangeSlider({
+        grid: true,
+        min: 0,
+        max: 1000,
+        from: 500,
+        from_min: 100,
+        from_max: 750
+    });
+
+    // Highlight limited zone
+    $("#ion-highlight-limit").ionRangeSlider({
+        grid: true,
+        min: 0,
+        max: 1000,
+        from: 500,
+        from_min: 100,
+        from_max: 750,
+        from_shadow: true
+    });
+
+    // Highlight limited zone in range
+    $("#ion-highlight-range").ionRangeSlider({
+        type: "double",
+        min: 0,
+        max: 100,
+        from: 20,
+        from_min: 10,
+        from_max: 30,
+        from_shadow: true,
+        to: 80,
+        to_min: 70,
+        to_max: 90,
+        to_shadow: true,
+        grid: true,
+        grid_num: 10
+    });
+
+
+    // Moment.js format
+    $("#ion-moment-basic").ionRangeSlider({
+        grid: true,
+        min: +moment().subtract(1, "years").format("X"),
+        max: +moment().format("X"),
+        from: +moment().subtract(6, "months").format("X"),
+        force_edges: true,
+        prettify: function (num) {
+            return moment(num, "X").format("ll");
+        }
+    });
+
+    // Time format
+    $("#ion-moment-time").ionRangeSlider({
+        grid: true,
+        min: +moment().subtract(12, "hours").format("X"),
+        max: +moment().format("X"),
+        from: +moment().subtract(6, "hours").format("X"),
+        force_edges: true,
+        prettify: function (num) {
+            return moment(num, "X").format("hh:mm A");
+        }
+    });
+
+    // Localization
+    $("#ion-moment-local").ionRangeSlider({
+        grid: true,
+        min: +moment().subtract(11, "months").format("X"),
+        max: +moment().format("X"),
+        from: +moment().subtract(6, "months").format("X"),
+        force_edges: true,
+        prettify: function (num) {
+            var m = moment(num, "X").locale("ru");
+            return m.format("MMMM");
+        }
+    });
+
+});

assets/js/pages/extra_sliders_noui.js

@@ -0,0 +1,989 @@
+/* ------------------------------------------------------------------------------
+*
+*  # NoUI Sliders
+*
+*  Specific JS code additions for extra_sliders_noui.html page
+*
+*  Version: 1.0
+*  Latest update: Nov 20, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Handles
+    // ------------------------------
+
+    // Setup
+    var slider_handles = document.getElementById('noui-slider-handles');
+    noUiSlider.create(slider_handles, {
+        start: [40, 80],
+        range: {
+            'min': [20],
+            'max': [100]
+        }
+    });
+
+    // Display values
+    var slider_handles_vals = [
+        document.getElementById('noui-handles-lower-val'),
+        document.getElementById('noui-handles-upper-val')
+    ];
+    slider_handles.noUiSlider.on('update', function( values, handle ) {
+        slider_handles_vals[handle].innerHTML = values[handle];
+    });
+
+
+    // Ranges
+    // ------------------------------
+
+    // Setup
+    var slider_range = document.getElementById('noui-slider-range');
+    noUiSlider.create(slider_range, {
+        start: [60],
+        range: {
+            'min': [20],
+            'max': [100]
+        }
+    });
+
+    // Display values
+    var slider_range_val = document.getElementById('noui-range-val');
+    slider_range.noUiSlider.on('update', function( values, handle ) {
+        slider_range_val.innerHTML = values[handle];
+    });
+
+
+    // Stepping
+    // ------------------------------
+
+    // Setup
+    var slider_stepping = document.getElementById('noui-slider-stepping');
+    noUiSlider.create(slider_stepping, {
+        start: [40],
+        step: 10,
+        range: {
+            'min': [20],
+            'max': [100]
+        },
+    });
+
+    // Display values
+    var slider_stepping_val = document.getElementById('noui-stepping-val');
+    slider_stepping.noUiSlider.on('update', function( values, handle ) {
+        slider_stepping_val.innerHTML = values[handle];
+    });
+
+
+    // Non-linear slider
+    // ------------------------------
+
+    // Define element
+    var slider_nonlinear = document.getElementById('noui-slider-nonlinear');
+
+    // Create slider
+    noUiSlider.create(slider_nonlinear, {
+        start: [ 40 ],
+        range: {
+            'min': [  20 ],
+            '30%': [  40 ],
+            '70%': [  80 ],
+            'max': [ 100 ]
+        }
+    });
+
+    // Define element for values
+    var slider_nonlinear_val = document.getElementById('noui-nonlinear-val');
+
+    // Show the value for the *last* moved handle.
+    slider_nonlinear.noUiSlider.on('update', function( values, handle ) {
+        slider_nonlinear_val.innerHTML = values[handle];
+    });
+
+
+    // Non-linear stepping
+    // ------------------------------
+
+    // Define element
+    var slider_nonlinear_step = document.getElementById('noui-slider-nonlinear-stepping');
+
+    // Create slider
+    noUiSlider.create(slider_nonlinear_step, {
+        start: [ 5, 40 ],
+        range: {
+            'min': [     0 ],
+            '10%': [   5,  5 ],
+            '50%': [  40, 10 ],
+            'max': [ 100 ]
+        }
+    });
+
+    // Define elements for values
+    var slider_nonlinear_step_vals = [
+        document.getElementById('noui-nonlinear-stepping-lower-val'),
+        document.getElementById('noui-nonlinear-stepping-upper-val')
+    ];
+
+    // Show the values
+    slider_nonlinear_step.noUiSlider.on('update', function( values, handle ) {
+        slider_nonlinear_step_vals[handle].innerHTML = values[handle];
+    });
+
+
+    // Snapping between steps
+    // ------------------------------
+
+    // Define element
+    var slider_nonlinear_snap = document.getElementById('noui-slider-snapping');
+
+    // Create slider
+    noUiSlider.create(slider_nonlinear_snap, {
+        start: [50, 800],
+        snap: true,
+        connect: true,
+        range: {
+            'min': 0,
+            '10%': 50,
+            '20%': 100,
+            '30%': 150,
+            '40%': 500,
+            '50%': 800,
+            'max': 1000
+        }
+    });
+
+    // Define elements for values
+    var slider_nonlinear_snap_vals = [
+        document.getElementById('noui-slider-snapping-lower-val'),
+        document.getElementById('noui-slider-snapping-upper-val')
+    ];
+
+    // Show the values
+    slider_nonlinear_snap.noUiSlider.on('update', function( values, handle ) {
+        slider_nonlinear_snap_vals[handle].innerHTML = values[handle];
+    });
+
+
+
+    // Behaviours
+    // ------------------------------
+
+    //
+    // Slider behaviour
+    //
+
+    // Define element
+    slider_behaviour = document.getElementById('noui-slider-behaviour');
+
+    // Create slider
+    noUiSlider.create(slider_behaviour, {
+        start: [ 40, 60 ],
+        step: 10,
+        behaviour: 'drag',
+        connect: true,
+        range: {
+            'min':  20,
+            'max':  80
+        }
+    });
+
+    // Define elements for values
+    var slider_behaviour_vals = [
+        document.getElementById('noui-slider-behaviour-lower-val'),
+        document.getElementById('noui-slider-behaviour-upper-val')
+    ];
+
+    // Show the values
+    slider_behaviour.noUiSlider.on('update', function( values, handle ) {
+        slider_behaviour_vals[handle].innerHTML = values[handle];
+    });
+
+
+    //
+    // Tap behaviour
+    //
+
+    // Define element
+    slider_tap_behaviour = document.getElementById('noui-slider-tap');
+
+    // Create slider
+    noUiSlider.create(slider_tap_behaviour, {
+        start: 40,
+        behaviour: 'tap',
+        connect: 'upper',
+        range: {
+            'min':  20,
+            'max':  80
+        }
+    });
+
+    // Define elements for values
+    var slider_tap_behaviour_val = document.getElementById('noui-slider-tap-val');
+
+    // Show the values
+    slider_tap_behaviour.noUiSlider.on('update', function( values, handle ) {
+        slider_tap_behaviour_val.innerHTML = values[handle];
+    });
+
+
+    //
+    // Drag behaviour
+    //
+
+    // Define element
+    var slider_drag_behaviour = document.getElementById('noui-slider-drag');
+
+    // Create slider
+    noUiSlider.create(slider_drag_behaviour, {
+        start: [ 40, 60 ],
+        behaviour: 'drag',
+        connect: true,
+        range: {
+            'min':  20,
+            'max':  80
+        }
+    });
+
+    // Define elements for values
+    var slider_drag_behaviour_vals = [
+        document.getElementById('noui-slider-drag-lower-val'),
+        document.getElementById('noui-slider-drag-upper-val')
+    ];
+
+    // Show the values
+    slider_drag_behaviour.noUiSlider.on('update', function( values, handle ) {
+        slider_drag_behaviour_vals[handle].innerHTML = values[handle];
+    });
+
+
+    //
+    // Fixed dragging
+    //
+
+    // Define element
+    slider_drag_fixed = document.getElementById('noui-slider-drag-fixed');
+
+    // Create slider
+    noUiSlider.create(slider_drag_fixed, {
+        start: [ 40, 60 ],
+        behaviour: 'drag-fixed',
+        connect: true,
+        range: {
+            'min':  20,
+            'max':  80
+        }
+    });
+
+    // Define elements for values
+    var slider_drag_fixed_vals = [
+        document.getElementById('noui-slider-fixed-lower-val'),
+        document.getElementById('noui-slider-fixed-upper-val')
+    ];
+
+    // Show the values
+    slider_drag_fixed.noUiSlider.on('update', function( values, handle ) {
+        slider_drag_fixed_vals[handle].innerHTML = values[handle];
+    });
+
+
+    //
+    // Snap behaviour
+    //
+
+    // Define element
+    slider_snap_behaviour = document.getElementById('noui-slider-snap');
+
+    // Create slider
+    noUiSlider.create(slider_snap_behaviour, {
+        start: 40,
+        behaviour: 'snap',
+        connect: 'lower',
+        range: {
+            'min':  20,
+            'max':  80
+        }
+    });
+
+    // Define elements for values
+    var slider_snap_behaviour_val = document.getElementById('noui-slider-snap-val');
+
+    // Show the values
+    slider_snap_behaviour.noUiSlider.on('update', function( values, handle ) {
+        slider_snap_behaviour_val.innerHTML = values[handle];
+    });
+
+
+    //
+    // Combined options
+    //
+
+    // Define element
+    slider_combined = document.getElementById('noui-slider-combined');
+
+    // Create slider
+    noUiSlider.create(slider_combined, {
+        start: [ 40, 60 ],
+        behaviour: 'drag-tap',
+        connect: true,
+        range: {
+            'min':  20,
+            'max':  80
+        }
+    });
+
+    // Define elements for values
+    var slider_combined_vals = [
+        document.getElementById('noui-slider-combined-lower-val'),
+        document.getElementById('noui-slider-combined-upper-val')
+    ];
+
+    // Show the values
+    slider_combined.noUiSlider.on('update', function( values, handle ) {
+        slider_combined_vals[handle].innerHTML = values[handle];
+    });
+
+
+
+    // Other examples
+    // ------------------------------
+
+    //
+    // Tooltip
+    //
+
+    // Define element
+    var slider_tooltip = document.getElementById('noui-slider-tooltip');
+
+    // Create slider
+    noUiSlider.create(slider_tooltip, {
+        start: [20, 80],
+        tooltips: true,
+        connect: true,
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Define elements for values
+    var slider_tooltip_vals = [
+        document.getElementById('noui-slider-tooltip-lower-val'),
+        document.getElementById('noui-slider-tooltip-upper-val')
+    ];
+
+    // Show the values
+    slider_tooltip.noUiSlider.on('update', function( values, handle ) {
+        slider_tooltip_vals[handle].innerHTML = values[handle];
+    });
+
+
+    //
+    // Set minimum handles distance
+    //
+
+    // Define element
+    var slider_margin = document.getElementById('noui-slider-margin');
+
+    // Create slider
+    noUiSlider.create(slider_margin, {
+        start: [ 20, 80 ],
+        connect: true,
+        margin: 30,
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Define elements for values
+    var slider_margin_vals = [
+        document.getElementById('noui-slider-margin-lower-val'),
+        document.getElementById('noui-slider-margin-upper-val')
+    ];
+
+    // Show the values
+    slider_margin.noUiSlider.on('update', function( values, handle ) {
+        slider_margin_vals[handle].innerHTML = values[handle];
+    });
+
+
+    //
+    // RTL direction
+    //
+
+    // Define element
+    var slider_direction = document.getElementById('noui-slider-direction');
+
+    // Create slider
+    noUiSlider.create(slider_direction, {
+        start: 20,
+        direction: 'rtl',
+        connect: 'lower',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Define elements for values
+    var slider_direction_val = document.getElementById('noui-slider-direction-val');
+
+    // Show the values
+    slider_direction.noUiSlider.on('update', function( values, handle ) {
+        slider_direction_val.innerHTML = values[handle];
+    });
+
+
+    //
+    // Connect lower side
+    //
+
+    // Define element
+    var slider_connect_lower = document.getElementById('noui-slider-connect-lower');
+
+    // Create slider
+    noUiSlider.create(slider_connect_lower, {
+        start: 40,
+        connect: 'lower',
+        range: {
+          'min': 0,
+          'max': 100
+        }
+    });
+
+    // Define elements for values
+    var slider_connect_lower_val = document.getElementById('noui-slider-connect-lower-val');
+
+    // Show the values
+    slider_connect_lower.noUiSlider.on('update', function( values, handle ) {
+        slider_connect_lower_val.innerHTML = values[handle];
+    });
+
+
+    //
+    // Skip certain steps
+    //
+
+    // Define element
+    var slider_skip = document.getElementById('noui-slider-skip-steps');
+
+    // Create slider
+    noUiSlider.create(slider_skip, {
+        range: {
+            'min': 0,
+            '10%': 10,
+            '20%': 20,
+            '30%': 30,
+            // Nope, 40 is no fun.
+            '50%': 50,
+            '60%': 60,
+            '70%': 70,
+            // I never liked 80.
+            '90%': 90,
+            'max': 100
+        },
+        snap: true,
+        connect: true,
+        start: [20, 70]
+    });
+
+    // Define elements for values
+    var slider_skip_vals = [
+        document.getElementById('noui-slider-skip-lower-val'),
+        document.getElementById('noui-slider-skip-upper-val')
+    ];
+
+    // Show the values
+    slider_skip.noUiSlider.on('update', function( values, handle ) {
+        slider_skip_vals[handle].innerHTML = values[handle];
+    });
+
+
+    //
+    // Connect upper side
+    //
+
+    // Define element
+    var slider_connect_upper = document.getElementById('noui-slider-connect-upper');
+
+    // Create slider
+    noUiSlider.create(slider_connect_upper, {
+        start: 40,
+        connect: 'upper',
+        range: {
+          'min': 0,
+          'max': 100
+        }
+    });
+
+    // Define elements for values
+    var slider_connect_upper_val = document.getElementById('noui-slider-connect-upper-val');
+
+    // Show the values
+    slider_connect_upper.noUiSlider.on('update', function( values, handle ) {
+        slider_connect_upper_val.innerHTML = values[handle];
+    });
+
+
+
+    // Sliders with pips
+    // ------------------------------
+
+    // Demo data for ranges
+    var range_all_sliders = {
+        'min': [     0 ],
+        '10%': [   5,  5 ],
+        '50%': [  40, 10 ],
+        'max': [ 100 ]
+    };
+
+
+    //
+    // Range slider pips
+    //
+
+    // Define element
+    var pips_range = document.getElementById('noui-slider-pips-range');
+
+    // Create slider
+    noUiSlider.create(pips_range, {
+        range: range_all_sliders,
+        start: 40,
+        connect: 'lower',
+        pips: {
+            mode: 'range',
+            density: 3
+        }
+    });
+
+
+    //
+    // Filtered pips
+    //
+
+    // Filter pips
+    function filter500(value, type) {
+        return value % 10 ? 2 : 1;
+    }
+
+    // Define element
+    var pips_filter = document.getElementById('noui-slider-pips-filter');
+
+    // Create slider
+    noUiSlider.create(pips_filter, {
+        range: range_all_sliders,
+        start: 40,
+        connect: 'lower',
+        pips: {
+            mode: 'steps',
+            density: 2,
+            filter: filter500
+        }
+    });
+
+
+    //
+    // RTL version
+    //
+
+    // Define element
+    pips_rtl = document.getElementById('noui-slider-pips-rtl');
+
+    // Create slider
+    noUiSlider.create(pips_rtl, {
+        range: range_all_sliders,
+        start: 60,
+        connect: 'lower',
+        direction: 'rtl',
+        pips: {
+            mode: 'range',
+            density: 3
+        }
+    });
+
+
+    //
+    // Positions mode
+    //
+
+    // Define element
+    var pips_positions = document.getElementById('noui-slider-pips-positions');
+
+    // Create slider
+    noUiSlider.create(pips_positions, {
+        range: range_all_sliders,
+        start: 18,
+        connect: 'upper',
+        pips: {
+            mode: 'positions',
+            values: [0,25,50,75,100],
+            density: 4
+        }
+    });
+
+
+    //
+    // Count mode
+    //
+
+    // Define element
+    var pips_count = document.getElementById('noui-slider-pips-count');
+
+    // Create slider
+    noUiSlider.create(pips_count, {
+        range: range_all_sliders,
+        start: 20,
+        connect: 'upper',
+        pips: {
+            mode: 'count',
+            values: 6,
+            density: 4
+        }
+    });
+
+
+    //
+    // Values mode
+    //
+
+    // Define element
+    var pips_values = document.getElementById('noui-slider-pips-values');
+
+    // Create slider
+    noUiSlider.create(pips_values, {
+        range: range_all_sliders,
+        start: 40,
+        connect: 'upper',
+        pips: {
+            mode: 'values',
+            values: [1, 10, 26, 57, 79, 99],
+            density: 4
+        }
+    });
+
+
+
+    // Vertical sliders
+    // ------------------------------
+
+    //
+    // Basic examples
+    //
+
+    // First
+    var slider_vertical_1 = document.getElementById('noui-slider-values1');
+    noUiSlider.create(slider_vertical_1, {
+        start: 20,
+        orientation: 'vertical',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Second
+    var slider_vertical_2 = document.getElementById('noui-slider-values2');
+    noUiSlider.create(slider_vertical_2, {
+        start: 40,
+        orientation: 'vertical',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Third
+    var slider_vertical_3 = document.getElementById('noui-slider-values3');
+    noUiSlider.create(slider_vertical_3, {
+        start: 60,
+        orientation: 'vertical',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Fourth
+    var slider_vertical_4 = document.getElementById('noui-slider-values4');
+    noUiSlider.create(slider_vertical_4, {
+        start: 80,
+        orientation: 'vertical',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+
+    //
+    // Connect to upper side
+    //
+
+    // First
+    var slider_vertical_upper_1 = document.getElementById('noui-slider-upper1');
+    noUiSlider.create(slider_vertical_upper_1, {
+        start: 20,
+        orientation: 'vertical',
+        connect: 'upper',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Second
+    var slider_vertical_upper_2 = document.getElementById('noui-slider-upper2');
+    noUiSlider.create(slider_vertical_upper_2, {
+        start: 40,
+        orientation: 'vertical',
+        connect: 'upper',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Third
+    var slider_vertical_upper_3 = document.getElementById('noui-slider-upper3');
+    noUiSlider.create(slider_vertical_upper_3, {
+        start: 60,
+        orientation: 'vertical',
+        connect: 'upper',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Fourth
+    var slider_vertical_upper_4 = document.getElementById('noui-slider-upper4');
+    noUiSlider.create(slider_vertical_upper_4, {
+        start: 80,
+        orientation: 'vertical',
+        connect: 'upper',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+
+    //
+    // Connect to lower side
+    //
+
+    // First
+    var slider_vertical_lower_1 = document.getElementById('noui-slider-lower1');
+    noUiSlider.create(slider_vertical_lower_1, {
+        start: 20,
+        orientation: 'vertical',
+        connect: 'lower',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Second
+    var slider_vertical_lower_2 = document.getElementById('noui-slider-lower2');
+    noUiSlider.create(slider_vertical_lower_2, {
+        start: 40,
+        orientation: 'vertical',
+        connect: 'lower',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Third
+    var slider_vertical_lower_3 = document.getElementById('noui-slider-lower3');
+    noUiSlider.create(slider_vertical_lower_3, {
+        start: 60,
+        orientation: 'vertical',
+        connect: 'lower',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Fourth
+    var slider_vertical_lower_4 = document.getElementById('noui-slider-lower4');
+    noUiSlider.create(slider_vertical_lower_4, {
+        start: 80,
+        orientation: 'vertical',
+        connect: 'lower',
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+
+    //
+    // Vertical range
+    //
+
+    // First
+    var slider_range_1 = document.getElementById('noui-slider-range1');
+    noUiSlider.create(slider_range_1, {
+        start: [ 15, 85 ],
+        orientation: 'vertical',
+        connect: true,
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+    // Second
+    var slider_range_2 = document.getElementById('noui-slider-range2');
+    noUiSlider.create(slider_range_2, {
+        start: [ 30, 70 ],
+        orientation: 'vertical',
+        connect: true,
+        range: {
+            'min': 0,
+            'max': 100
+        }
+    });
+
+
+    //
+    // Top to bottom pips
+    //
+
+    // First
+    var slider_pips_top_1 = document.getElementById('noui-slider-top1');
+    noUiSlider.create(slider_pips_top_1, {
+        range: range_all_sliders,
+        start: 40,
+        connect: 'lower',
+        orientation: 'vertical',
+        pips: {
+            mode: 'range',
+            density: 5
+        }
+    });
+
+    // Second
+    var slider_pips_top_2 = document.getElementById('noui-slider-top2');
+    noUiSlider.create(slider_pips_top_2, {
+        range: range_all_sliders,
+        start: 60,
+        connect: 'lower',
+        orientation: 'vertical',
+        pips: {
+            mode: 'range',
+            density: 5
+        }
+    });
+
+
+    //
+    // Bottom to top pips
+    //
+
+    // First
+    var slider_pips_bottom_1 = document.getElementById('noui-slider-bottom1');
+    noUiSlider.create(slider_pips_bottom_1, {
+        range: range_all_sliders,
+        start: 40,
+        connect: 'lower',
+        orientation: 'vertical',
+        direction: 'rtl',
+        pips: {
+            mode: 'range',
+            density: 5
+        }
+    });
+
+    // Second
+    var slider_pips_bottom_2 = document.getElementById('noui-slider-bottom2');
+    noUiSlider.create(slider_pips_bottom_2, {
+        range: range_all_sliders,
+        start: 60,
+        connect: 'lower',
+        orientation: 'vertical',
+        direction: 'rtl',
+        pips: {
+            mode: 'range',
+            density: 5
+        }
+    });
+
+
+
+    // Optional styling
+    // ------------------------------
+
+    //
+    // Colors
+    //
+
+    // Define elements
+    var color1 = document.getElementById('noui-slider-color-demo1'),
+        color2 = document.getElementById('noui-slider-color-demo2'),
+        color3 = document.getElementById('noui-slider-color-demo3'),
+        color4 = document.getElementById('noui-slider-color-demo4'),
+        color5 = document.getElementById('noui-slider-color-demo5'),
+        color6 = document.getElementById('noui-slider-color-demo6');
+
+    // Set common options
+    var color_options = {
+        start: [2, 8],
+        connect: true,
+        range: {
+            'min': 0,
+            'max': 10
+        }
+    }
+
+    // Create sliders
+    noUiSlider.create(color1, color_options);
+    noUiSlider.create(color2, color_options);
+    noUiSlider.create(color3, color_options);
+    noUiSlider.create(color4, color_options);
+    noUiSlider.create(color5, color_options);
+    noUiSlider.create(color6, color_options);
+
+
+    //
+    // Sizes and styles
+    //
+
+    // Define elements
+    var default_size1 = document.getElementById('slider-default-lg'),
+        default_size2 = document.getElementById('slider-default-md'),
+        default_size3 = document.getElementById('slider-default-sm'),
+        default_size4 = document.getElementById('slider-default-xs'),
+
+        solid_size1 = document.getElementById('slider-solid-lg'),
+        solid_size2 = document.getElementById('slider-solid-md'),
+        solid_size3 = document.getElementById('slider-solid-sm'),
+        solid_size4 = document.getElementById('slider-solid-xs'),
+
+        white_size1 = document.getElementById('slider-white-lg'),
+        white_size2 = document.getElementById('slider-white-md'),
+        white_size3 = document.getElementById('slider-white-sm'),
+        white_size4 = document.getElementById('slider-white-xs');
+
+    // Create sliders
+    noUiSlider.create(default_size1, color_options);
+    noUiSlider.create(default_size2, color_options);
+    noUiSlider.create(default_size3, color_options);
+    noUiSlider.create(default_size4, color_options);
+
+    noUiSlider.create(solid_size1, color_options);
+    noUiSlider.create(solid_size2, color_options);
+    noUiSlider.create(solid_size3, color_options);
+    noUiSlider.create(solid_size4, color_options);
+
+    noUiSlider.create(white_size1, color_options);
+    noUiSlider.create(white_size2, color_options);
+    noUiSlider.create(white_size3, color_options);
+    noUiSlider.create(white_size4, color_options);
+
+});

assets/js/pages/extra_trees.js

@@ -0,0 +1,320 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Dynamic tree views
+*
+*  Specific JS code additions for extra_trees.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Basic setup
+    // ------------------------------
+
+    // Basic example
+    $(".tree-default").fancytree({
+        init: function(event, data) {
+            $('.has-tooltip .fancytree-title').tooltip();
+        }
+    });
+
+
+    // Load JSON data
+    $(".tree-ajax").fancytree({
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        },
+        init: function(event, data) {
+            $('.has-tooltip .fancytree-title').tooltip();
+        }
+    });
+
+
+    // Embed JSON data
+    $(".tree-json").fancytree({
+        init: function(event, data) {
+            $('.has-tooltip .fancytree-title').tooltip();
+        }
+    });
+
+
+    // Child counter
+    $(".tree-child-count").fancytree({
+        extensions: ["childcounter"],
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        },
+        childcounter: {
+            deep: true,
+            hideZeros: true,
+            hideExpanded: true
+        },
+        init: function(event, data) {
+            $('.has-tooltip .fancytree-title').tooltip();
+        }
+    });
+
+
+    // Drag and drop support
+    $(".tree-drag").fancytree({
+        extensions: ["dnd"],
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        },
+        dnd: {
+            autoExpandMS: 400,
+            focusOnClick: true,
+            preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+            preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
+            dragStart: function(node, data) {
+                return true;
+            },
+            dragEnter: function(node, data) {
+                return true;
+            },
+            dragDrop: function(node, data) {
+
+                // This function MUST be defined to enable dropping of items on the tree.
+                data.otherNode.moveTo(node, data.hitMode);
+            }
+        },
+        init: function(event, data) {
+            $('.has-tooltip .fancytree-title').tooltip();
+        }
+    });
+
+
+    // Editable nodes
+    $(".tree-editable").fancytree({
+        extensions: ["edit"],
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        },
+        edit: {
+            adjustWidthOfs: 0,
+            inputCss: {minWidth: "0"},
+            triggerStart: ["f2", "dblclick", "shift+click", "mac+enter"],
+            save: function(event, data) {
+                alert("save " + data.input.val()); // Save data.input.val() or return false to keep editor open
+            }
+        }
+    });
+
+
+
+    // Selectable nodes
+    // ------------------------------
+
+    // Single selection
+    $(".tree-radio").fancytree({
+        checkbox: true,
+        selectMode: 1,
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        }    
+    });
+
+
+    // Multiple selection
+    $(".tree-checkbox").fancytree({
+        checkbox: true,
+        selectMode: 2,
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        }
+    });
+
+
+    // Disable selections
+    $(".tree-checkbox-options").fancytree({
+        checkbox: true,
+        selectMode: 2
+    });
+
+
+    // Hierarchical select
+    $(".tree-checkbox-hierarchical").fancytree({
+        checkbox: true,
+        selectMode: 3
+    });
+
+
+    //
+    // Toggle checkbox state
+    //
+
+    // Initialize
+    $(".tree-checkbox-toggle").fancytree({
+        checkbox: true,
+        selectMode: 2,
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        }    
+    });
+
+    // Initialize switchery toggle
+    var switcherySelect = document.querySelector('.switchery-select');
+    var initSelect = new Switchery(switcherySelect);
+
+    // Change checkbox states
+    switcherySelect.onchange = function() {
+        if(switcherySelect.checked) {
+            $(".tree-checkbox-toggle").fancytree("getTree").visit(function(node){
+                node.setSelected(true);
+            });
+            return false;
+        }
+        else {
+            $(".tree-checkbox-toggle").fancytree("getTree").visit(function(node){
+                node.setSelected(false);
+            });
+            return false;
+        }
+    };
+
+
+
+    // Advanced examples
+    // ------------------------------
+
+    //
+    // Toggle state
+    //
+
+    // Initialize switchery toggle
+    var switchery = document.querySelector('#tree-disabled');
+    var init = new Switchery(switchery);
+
+    // Do something on state change
+    switchery.onchange = function() {
+        if(switchery.checked) {
+            $(".tree-toggle").fancytree("disable");
+        }
+        else {
+            $(".tree-toggle").fancytree("enable");
+        }
+    };
+
+    // Initialize
+    $(".tree-toggle").fancytree({
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        },
+        init: function(event, data) {
+            $('.has-tooltip .fancytree-title').tooltip();
+        }
+    });
+
+
+    //
+    // Sorting
+    //
+
+    // Initialize
+    $(".tree-sorting").fancytree();
+
+    // Sort tree
+    $('.sort-tree').on('click', function() {
+        var node = $(".tree-sorting").fancytree("getRootNode");
+        node.sortChildren(null, true);
+    });
+
+    // Sort active nodes
+    $('.sort-branch').on('click', function() {
+        var node = $(".tree-sorting").fancytree("getActiveNode");
+
+        // Custom compare function (optional) that sorts case insensitive
+        var cmp = function(a, b) {
+            a = a.title.toLowerCase();
+            b = b.title.toLowerCase();
+            return a > b ? 1 : a < b ? -1 : 0;
+        };
+        node.sortChildren(cmp, false);
+    });
+
+
+    //
+    // Tree persistence
+    //
+
+    // Initialize
+    $(".tree-persistence").fancytree({
+        extensions: ["persist"],
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        },
+        checkbox: true,
+        persist: {
+            overrideSource: false, // true: cookie takes precedence over `source` data attributes.
+            store: "auto" // 'cookie', 'local': use localStore, 'session': sessionStore
+        },
+        postProcess: function(event, data) {
+            var prefix = data.node.getIndexHier() + ".";
+            $.each(data.response, function(idx, childEntry) {
+                if( childEntry.key == null ) {
+                    childEntry.key = prefix + (idx + 1);
+                    childEntry.title += " (" + childEntry.key + ")";
+                }
+            })
+        }
+    });
+    var tree5 = $(".tree-persistence").fancytree("getTree");
+
+    // Reset cookies on button click
+    $('.reset-cookies').on('click', function() {
+        tree5.clearCookies();
+    });
+
+
+    //
+    // Table tree
+    //
+
+    $(".tree-table").fancytree({
+        extensions: ["table"],
+        checkbox: true,
+        table: {
+            indentation: 20,      // indent 20px per node level
+            nodeColumnIdx: 2,     // render the node title into the 2nd column
+            checkboxColumnIdx: 0  // render the checkboxes into the 1st column
+        },
+        source: {
+            url: "assets/demo_data/fancytree/fancytree.json"
+        },
+        lazyLoad: function(event, data) {
+            data.result = {url: "ajax-sub2.json"}
+        },
+        renderColumns: function(event, data) {
+            var node = data.node,
+            $tdList = $(node.tr).find(">td");
+
+            // (index #0 is rendered by fancytree by adding the checkbox)
+            $tdList.eq(1).text(node.getIndexHier()).addClass("alignRight");
+
+            // (index #2 is rendered by fancytree)
+            $tdList.eq(3).text(node.key);
+            $tdList.eq(4).addClass('text-center').html("<input type='checkbox' class='styled' name='like' value='" + node.key + "'>");
+
+            // Style checkboxes
+            $(".styled").uniform({radioClass: 'choice'});
+        }
+    });
+
+    // Handle custom checkbox clicks
+    $(".tree-table").delegate("input[name=like]", "click", function (e){
+        var node = $.ui.fancytree.getNode(e),
+        $input = $(e.target);
+        e.stopPropagation(); // prevent fancytree activate for this row
+        if($input.is(":checked")){
+            alert("like " + $input.val());
+        }
+        else{
+            alert("dislike " + $input.val());
+        }
+    });
+    
+});

assets/js/pages/form_bootstrap_select.js

@@ -0,0 +1,108 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Bootstrap selects
+*
+*  Specific JS code additions for form_bootstrap_select.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Override defaults
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark3'
+    }
+
+
+
+    // Basic setup
+    // ------------------------------
+
+    // Basic select
+    $('.bootstrap-select').selectpicker();
+
+
+    // Dynamic refresh
+    $('.rm-alaska').click(function() {
+        $('.refresh-example').find('[value=AK]').remove();
+        $('.refresh-example').selectpicker('refresh');
+    });
+    $('.rm-hawaii').click(function() {
+        $('.refresh-example').find('[value=HI]').remove();
+        $('.refresh-example').selectpicker('refresh');
+    });
+
+
+    // Toggle state
+    $('.sel-disable').click(function() {
+        $('.disable-example').prop('disabled',true);
+        $('.disable-example').selectpicker('refresh');
+    });
+    $('.sel-enable').click(function() {
+        $('.disable-example').prop('disabled',false);
+        $('.disable-example').selectpicker('refresh');
+    });
+
+
+    //
+    // Additional styling
+    //
+
+    // Custom color result color
+    $('.bootstrap-select-solid').selectpicker();
+    $('.bootstrap-select-solid').on('show.bs.dropdown', function () {
+        $(this).find('.dropdown-menu').addClass('bg-slate');
+    });
+
+
+    // Custom menu color
+    $('.bootstrap-select-menu-color').selectpicker();
+    $('.bootstrap-select-menu-color').on('show.bs.dropdown', function () {
+        $(this).find('.dropdown-menu').addClass('bg-teal-400');
+    });
+
+
+
+    // Methods
+    // ------------------------------
+
+    // Single value method
+    $('#set-single-value').on('click', function() {
+        $('.set-single-value').selectpicker('val', 'NV');
+    });
+
+
+    // Multiple values method
+    $('#set-multiple-values').on('click', function() {
+        $('.set-multiple-values').selectpicker('val', ['NV','AZ']);
+    });
+
+
+    // Select all method
+    $('#select-all-values').on('click', function() {
+        $('.select-all-values').selectpicker('selectAll');
+    });
+
+
+    // Deselect all method
+    $('#deselect-all-values').on('click', function() {
+        $('.select-all-values').selectpicker('deselectAll');
+    });
+
+
+    // Show method
+    $('#show-menu').on('click', function() {
+        $('.toggle-menu').selectpicker('show');
+    });
+
+
+    // Hide method
+    $('#hide-menu').on('click', function() {
+        $('.toggle-menu').selectpicker('hide');
+    });
+
+});

assets/js/pages/form_checkboxes_radios.js

@@ -0,0 +1,109 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Styled checkboxes, radios and file input
+*
+*  Specific JS code additions for form_checkboxes_radios.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Switchery
+    // ------------------------------
+
+    // Initialize multiple switches
+    if (Array.prototype.forEach) {
+        var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
+        elems.forEach(function(html) {
+            var switchery = new Switchery(html);
+        });
+    }
+    else {
+        var elems = document.querySelectorAll('.switchery');
+        for (var i = 0; i < elems.length; i++) {
+            var switchery = new Switchery(elems[i]);
+        }
+    }
+
+    // Colored switches
+    var primary = document.querySelector('.switchery-primary');
+    var switchery = new Switchery(primary, { color: '#2196F3' });
+
+    var danger = document.querySelector('.switchery-danger');
+    var switchery = new Switchery(danger, { color: '#EF5350' });
+
+    var warning = document.querySelector('.switchery-warning');
+    var switchery = new Switchery(warning, { color: '#FF7043' });
+
+    var info = document.querySelector('.switchery-info');
+    var switchery = new Switchery(info, { color: '#00BCD4'});
+
+
+
+    // Checkboxes/radios (Uniform)
+    // ------------------------------
+
+    // Default initialization
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice'
+    });
+
+    // File input
+    $(".file-styled").uniform({
+        wrapperClass: 'bg-blue',
+        fileButtonHtml: '<i class="icon-file-plus"></i>'
+    });
+
+
+    //
+    // Contextual colors
+    //
+
+    // Primary
+    $(".control-primary").uniform({
+        radioClass: 'choice',
+        wrapperClass: 'border-primary-600 text-primary-800'
+    });
+
+    // Danger
+    $(".control-danger").uniform({
+        radioClass: 'choice',
+        wrapperClass: 'border-danger-600 text-danger-800'
+    });
+
+    // Success
+    $(".control-success").uniform({
+        radioClass: 'choice',
+        wrapperClass: 'border-success-600 text-success-800'
+    });
+
+    // Warning
+    $(".control-warning").uniform({
+        radioClass: 'choice',
+        wrapperClass: 'border-warning-600 text-warning-800'
+    });
+
+    // Info
+    $(".control-info").uniform({
+        radioClass: 'choice',
+        wrapperClass: 'border-info-600 text-info-800'
+    });
+
+    // Custom color
+    $(".control-custom").uniform({
+        radioClass: 'choice',
+        wrapperClass: 'border-indigo-600 text-indigo-800'
+    });
+
+
+
+    // Bootstrap switch
+    // ------------------------------
+
+    $(".switch").bootstrapSwitch();
+    
+});

assets/js/pages/form_controls_extended.js

@@ -0,0 +1,491 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Extended form controls
+*
+*  Specific JS code additions for form_controls_extended.html page
+*
+*  Version: 1.2
+*  Latest update: Jul 4, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // ========================================
+    //
+    // Components
+    //
+    // ========================================
+
+
+    // Input formatter
+    // ------------------------------
+
+    // Date
+    $('[name="format-date"]').formatter({
+        pattern: '{{99}}/{{99}}/{{9999}}'
+    });
+
+    // Credit card
+    $('[name="format-credit-card"]').formatter({
+        pattern: '{{9999}} - {{9999}} - {{9999}} - {{9999}}'
+    });
+
+    // Phone #
+    $('.format-phone-number').formatter({
+        pattern: '({{999}}) {{999}} - {{9999}}'
+    });
+
+    // Phone ext
+    $('[name="format-phone-ext"]').formatter({
+        pattern: '({{999}}) {{999}} - {{9999}} / {{a999}}'
+    });
+
+    // Currency
+    $('[name="format-currency"]').formatter({
+        pattern: '${{999}}.{{99}}'
+    });
+
+    // International phone
+    $('[name="format-international-phone"]').formatter({
+        pattern: '+3{{9}} {{999}} {{999}} {{999}}'
+    });
+
+    // Tax id
+    $('[name="format-tax-id"]').formatter({
+        pattern: '{{99}} - {{9999999}}'
+    });
+
+    // SSN
+    $('[name="format-ssn"]').formatter({
+        pattern: '{{999}} - {{99}} - {{9999}}'
+    });
+
+    // Product key
+    $('[name="format-product-key"]').formatter({
+        pattern: '{{a*}} - {{999}} - {{a999}}'
+    });
+
+    // Order #
+    $('[name="format-order-number"]').formatter({
+        pattern: '{{aaa}} - {{999}} - {{***}}'
+    });
+
+    // ISBN
+    $('[name="format-isbn"]').formatter({
+        pattern: '{{999}} - {{99}} - {{999}} - {{9999}} - {{9}}'
+    });
+
+    // Persistent
+    $('[name="format-persistent"]').formatter({
+        pattern: '+3 ({{999}}) {{999}} - {{99}} - {{99}}'
+    });
+
+
+
+    // Elastic textarea
+    // ------------------------------
+
+    // Basic example
+    autosize($('.elastic'));
+
+    // Manual trigger
+    $('.elastic-manual-trigger').on('click', function() {
+        var manual = autosize($('.elastic-manual'));
+        $('.elastic-manual').val('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed ultricies nibh, sed faucibus eros. Vivamus tristique fringilla ante, vitae pellentesque quam porta vel. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vehicula gravida nisl non imperdiet. Mauris felis odio, vehicula et laoreet non, tempor non enim. Cras convallis sapien hendrerit nibh sagittis sollicitudin. Fusce nec ultricies justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ac urna in dui consequat cursus vel sit amet mauris. Proin nec bibendum arcu. Aenean sit amet nisi mi. Sed non leo nisl. Mauris leo odio, ultricies interdum ornare ac, posuere eu risus. Suspendisse adipiscing sapien sit amet gravida sollicitudin. Maecenas laoreet velit in dui adipiscing, vel fermentum tellus ullamcorper. Nullam et mi rhoncus, tempus nulla sit amet, varius ipsum.');
+        autosize.update(manual);
+    });
+
+    // Destroy method
+    var destroyAutosize = autosize($('.elastic-destroy'));
+    $('.elastic-destroy-trigger').on('click', function() {
+        autosize.destroy(destroyAutosize);
+    });
+
+
+
+    // Passy - password generator
+    // ------------------------------
+
+    // Input labels
+    var $inputLabel = $('.label-indicator input');
+    var $inputLabelAbsolute = $('.label-indicator-absolute input');
+    var $inputGroup = $('.group-indicator input');
+
+    // Output labels
+    var $outputLabel = $('.label-indicator > span');
+    var $outputLabelAbsolute = $('.label-indicator-absolute > span');
+    var $outputGroup = $('.group-indicator > span');
+
+
+    // Min input length
+    $.passy.requirements.length.min = 4;
+
+
+    // Strength meter
+    var feedback = [
+        {color: '#D55757', text: 'Weak', textColor: '#fff'},
+        {color: '#EB7F5E', text: 'Normal', textColor: '#fff'},
+        {color: '#3BA4CE', text: 'Good', textColor: '#fff'},
+        {color: '#40B381', text: 'Strong', textColor: '#fff'}
+    ];
+
+
+    //
+    // Setup strength meter
+    //
+
+    // Label indicator
+    $inputLabel.passy(function(strength) {
+        $outputLabel.text(feedback[strength].text);
+        $outputLabel.css('background-color', feedback[strength].color).css('color', feedback[strength].textColor);
+    });
+
+    // Absolute positioned label
+    $inputLabelAbsolute.passy(function(strength) {
+        $outputLabelAbsolute.text(feedback[strength].text);
+        $outputLabelAbsolute.css('background-color', feedback[strength].color).css('color', feedback[strength].textColor);
+    });
+
+    // Input group indicator
+    $inputGroup.passy(function(strength) {
+        $outputGroup.text(feedback[strength].text);
+        $outputGroup.css('background-color', feedback[strength].color).css('border-color', feedback[strength].color).css('color', feedback[strength].textColor);
+    });
+
+
+    //
+    // Initialize
+    //
+
+    // Label
+    $('.generate-label').click(function() {
+        $inputLabel.passy( 'generate', 12 );
+    });
+
+    // Absolute label
+    $('.generate-label-absolute').click(function() {
+        $inputLabelAbsolute.passy( 'generate', 10 );
+    });
+
+    // Group label
+    $('.generate-group').click(function() {
+        $inputGroup.passy( 'generate', 8 );
+    });
+
+
+
+    // Maxlength
+    // ------------------------------
+
+    // Basic example
+    $('.maxlength').maxlength();
+
+    // Threshold
+    $('.maxlength-threshold').maxlength({
+        threshold: 15
+    });
+
+    // Custom label color
+    $('.maxlength-custom').maxlength({
+        threshold: 10,
+        warningClass: "label label-primary",
+        limitReachedClass: "label label-danger"
+    });
+
+    // Options
+    $('.maxlength-options').maxlength({
+        alwaysShow: true,
+        threshold: 10,
+        warningClass: "text-success",
+        limitReachedClass: "text-danger",
+        separator: ' of ',
+        preText: 'You have ',
+        postText: ' chars remaining.',
+        validate: true
+    });
+
+    // Always show label
+    $('.maxlength-textarea').maxlength({
+        alwaysShow: true
+    });
+
+    // Label position
+    $('.maxlength-label-position').maxlength({
+        alwaysShow: true,
+        placement: 'top'
+    });
+
+
+
+
+    // ========================================
+    //
+    // Typeahead
+    //
+    // ========================================
+
+
+    // Basic example
+    // ------------------------------
+
+    // Substring matches
+    var substringMatcher = function(strs) {
+        return function findMatches(q, cb) {
+            var matches, substringRegex;
+
+            // an array that will be populated with substring matches
+            matches = [];
+
+            // regex used to determine if a string contains the substring `q`
+            substrRegex = new RegExp(q, 'i');
+
+            // iterate through the pool of strings and for any string that
+            // contains the substring `q`, add it to the `matches` array
+            $.each(strs, function(i, str) {
+                if (substrRegex.test(str)) {
+
+                    // the typeahead jQuery plugin expects suggestions to a
+                    // JavaScript object, refer to typeahead docs for more info
+                    matches.push({ value: str });
+                }
+            });
+
+            cb(matches);
+        };
+    };
+
+    // Add data
+    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
+        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
+        'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
+        'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
+        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
+        'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
+        'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
+        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
+        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
+    ];
+
+    // Initialize
+    $('.typeahead-basic').typeahead(
+        {
+            hint: true,
+            highlight: true,
+            minLength: 1
+        },
+        {
+            name: 'states',
+            displayKey: 'value',
+            source: substringMatcher(states)
+        }
+    );
+
+
+
+    // Bloodhound engine
+    // ------------------------------
+
+    // Constructs the suggestion engine
+    var states = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+
+        // `states` is an array of state names defined in "The Basics"
+        local: $.map(states, function(state) { return { value: state }; })
+    });
+
+    // Initialize engine
+    states.initialize();
+
+    // Initialize
+    $('.typeahead-bloodhound').typeahead(
+        {
+            hint: true,
+            highlight: true,
+            minLength: 1
+        },
+        {
+            name: 'states',
+            displayKey: 'value',
+
+            // `ttAdapter` wraps the suggestion engine in an adapter that
+            // is compatible with the typeahead jQuery plugin
+            source: states.ttAdapter()
+        }
+    );
+
+
+
+    // Prefetched data
+    // ------------------------------
+
+    // Constructs the suggestion engine
+    var countries = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        limit: 10,
+        prefetch: {
+
+            // url points to a json file that contains an array of country names, see
+            // https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
+            url: 'assets/demo_data/typeahead/countries.json',
+
+            // the json file contains an array of strings, but the Bloodhound
+            // suggestion engine expects JavaScript objects so this converts all of
+            // those strings
+            filter: function(list) {
+                return $.map(list, function(country) { return { name: country }; });
+            }
+        }
+    });
+
+    // Initialize engine
+    countries.initialize();
+
+    // Passing in `null` for the `options` arguments will result in the default options being used
+    $('.typeahead-prefetched').typeahead(null, {
+        name: 'countries',
+        displayKey: 'name',
+
+        // `ttAdapter` wraps the suggestion engine in an adapter that
+        // is compatible with the typeahead jQuery plugin
+        source: countries.ttAdapter()
+    });
+
+
+
+    // Remote data
+    // ------------------------------
+
+    // Constructs the suggestion engine
+    var bestPictures = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        prefetch: 'assets/demo_data/typeahead/movies.json',
+        remote: 'assets/json/queries/%QUERY.json'
+    });
+
+    // Initialize engine
+    bestPictures.initialize();
+
+    // Initialize
+    $('.typeahead-remote').typeahead(null, {
+        name: 'best-pictures',
+        displayKey: 'value',
+        source: bestPictures.ttAdapter()
+    });
+
+
+
+    // Custom templates
+    // ------------------------------
+
+    // Initialize with opitons
+    $('.typeahead-custom-templates').typeahead(null, {
+        name: 'best-pictures',
+        displayKey: 'value',
+        source: bestPictures.ttAdapter(),
+        templates: {
+            empty: [
+                '<div class="empty-message">',
+                'unable to find any Best Picture winners that match the current query',
+                '</div>'
+            ].join('\n'),
+            suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
+        }
+    });
+
+
+
+    // Multiple datasets
+    // ------------------------------
+
+    // Constructs the suggestion engine for 1st dataset
+    var nbaTeams = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        prefetch: 'assets/demo_data/typeahead/nba.json'
+    });
+
+    // Constructs the suggestion engine for 2nd dataset
+    var nhlTeams = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        prefetch: 'assets/demo_data/typeahead/nhl.json'
+    });
+
+    // Initialize engines
+    nbaTeams.initialize();
+    nhlTeams.initialize();
+
+    // Initialize 1st dataset
+    $('.typeahead-multiple-datasets').typeahead(
+        {
+            highlight: true
+        },
+        {
+            name: 'group',
+            displayKey: 'team',
+            source: nbaTeams.ttAdapter(),
+            templates: {
+                header: '<span class="tt-heading">NBA Teams</span>'
+            }
+        },
+        {
+            name: 'group',
+            displayKey: 'team',
+            source: nhlTeams.ttAdapter(),
+            templates: {
+                header: '<span class="tt-heading">NHL Teams</span>'
+            }
+        }
+    );
+
+
+
+    // Dropdown height
+    // ------------------------------
+
+    // Initialize with options
+    $('.typeahead-scrollable-menu').typeahead(null, {
+        name: 'countries',
+        displayKey: 'name',
+        source: countries.ttAdapter()
+    });
+
+
+
+    // RTL support
+    // ------------------------------
+
+    // Constructs the suggestion engine
+    var arabicPhrases = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('word'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        local: [
+            { word: "الإنجليزية" },
+            { word: "نعم" },
+            { word: "لا" },
+            { word: "مرحبا" },
+            { word: "أهلا" }
+        ]
+    });
+
+    // Initialize engine
+    arabicPhrases.initialize();
+
+    // Initialize
+    $('.typeahead-rtl-support').typeahead(
+        {
+            hint: false
+        },
+        {
+            name: 'arabic-phrases',
+            displayKey: 'word',
+            source: arabicPhrases.ttAdapter()
+        }
+    );
+
+});

assets/js/pages/form_dual_listboxes.js

@@ -0,0 +1,82 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Dual listboxes
+*
+*  Specific JS code additions for form_dual_listboxes.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Basic example
+    $('.listbox').bootstrapDualListbox();
+
+
+    // Multiple selection
+    $('.listbox-no-selection').bootstrapDualListbox({
+        preserveSelectionOnMove: 'moved',
+        moveOnSelect: false
+    });
+
+
+    // Filtered results
+    $('.listbox-filtered-results').bootstrapDualListbox({
+        nonSelectedListLabel: 'Non-selected',
+        selectedListLabel: 'Selected',
+        preserveSelectionOnMove: 'moved',
+        moveOnSelect: false,
+        nonSelectedFilter: 'Biophysics|Econophysics|Geophysics|Thermodynamics'
+    });
+
+
+    // Disable filtering
+    $('.listbox-filter-disabled').bootstrapDualListbox({
+        showFilterInputs: false
+    });
+
+
+    // Control container height
+    $('.listbox-tall').bootstrapDualListbox({
+        selectorMinimalHeight: 300
+    });
+
+
+    // Custom text
+    $('.listbox-custom-text').bootstrapDualListbox({
+        moveOnSelect: false,
+        infoText: 'Показать все {0}',
+        infoTextFiltered: '<span class="label label-warning">Отфильтровано</span> {0} из {1}',
+        infoTextEmpty: 'Пустой лист',
+        filterPlaceHolder: 'Фильтр',
+        filterTextClear: 'Показать все'
+    });
+
+
+    //
+    // Add options dynamically
+    //
+
+    // Initialize
+    $('.listbox-dynamic-options').bootstrapDualListbox({
+        moveOnSelect: false
+    });
+
+
+    // Add options
+    $(".listbox-add").click(function(){
+        $('.listbox-dynamic-options').append('<option value="apples">Apples</option><option value="oranges" selected>Oranges</option>');
+        $('.listbox-dynamic-options').trigger('bootstrapDualListbox.refresh');
+    });
+
+
+    // Add options with clearing highlights
+    $(".listbox-add-clear").click(function(){
+        $('.listbox-dynamic-options').append('<option value="apples">Apples</option><option value="oranges" selected>Oranges</option>');
+        $('.listbox-dynamic-options').trigger('bootstrapDualListbox.refresh', true);
+    });
+    
+});

assets/js/pages/form_floating_labels.js

@@ -0,0 +1,213 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Form layouts
+*
+*  Specific JS code additions for form layouts pages
+*
+*  Version: 1.0
+*  Latest update: Mar 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Plugins (ordering matters)
+    // ------------------------------
+
+    // Basic initialization
+    $('.token-field').tokenfield();
+
+
+    // Basic initialization
+    $('.tags-input').tagsinput();
+
+
+
+    // Basic example
+    // ------------------------------
+
+    // Substring matches
+    var substringMatcher = function(strs) {
+        return function findMatches(q, cb) {
+            var matches, substringRegex;
+
+            // an array that will be populated with substring matches
+            matches = [];
+
+            // regex used to determine if a string contains the substring `q`
+            substrRegex = new RegExp(q, 'i');
+
+            // iterate through the pool of strings and for any string that
+            // contains the substring `q`, add it to the `matches` array
+            $.each(strs, function(i, str) {
+                if (substrRegex.test(str)) {
+
+                    // the typeahead jQuery plugin expects suggestions to a
+                    // JavaScript object, refer to typeahead docs for more info
+                    matches.push({ value: str });
+                }
+            });
+
+            cb(matches);
+        };
+    };
+
+    // Add data
+    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
+        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
+        'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
+        'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
+        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
+        'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
+        'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
+        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
+        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
+    ];
+
+    // Initialize
+    $('.typeahead-basic').typeahead(
+        {
+            hint: true,
+            highlight: true,
+            minLength: 1
+        },
+        {
+            name: 'states',
+            displayKey: 'value',
+            source: substringMatcher(states)
+        }
+    );
+
+
+
+    // Floating labels
+    // ------------------------------
+
+    // Variables
+    var onClass = "on";
+    var showClass = "is-visible";
+
+
+    // Setup
+    $("input:not(.token-input):not(.bootstrap-tagsinput > input), textarea, select").on("checkval change", function () {
+
+        // Define label
+        var label = $(this).parents('.form-group-material').children(".control-label");
+
+        // Toggle label
+        if (this.value !== "") {
+            label.addClass(showClass);
+        }
+        else {
+            label.removeClass(showClass).addClass('animate');
+        }
+
+    }).on("keyup", function () {
+        $(this).trigger("checkval");
+    }).trigger("checkval").trigger('change');
+
+
+    // Remove animation on page load
+    $(window).on('load', function() {
+        $(".form-group-material").children('.control-label.is-visible').removeClass('animate');
+    });
+
+
+    //
+    // Setup plugins
+    //
+
+    // Tokenfield
+    $(".token-field").on('tokenfield:createdtoken tokenfield:removedtoken change', function (e) {
+        if($(this).parent().children().hasClass('token')) {
+            $(this).parent().find('.token-input').attr('placeholder', '');
+        }
+        else {
+            $(this).parent().find('.token-input').attr('placeholder', '- Tokenfield');
+        }
+    }).trigger('change');
+
+
+    // Tags input
+    $(".tags-input").on('itemAdded itemRemoved change', function (e) {
+        if($(this).parent().find('.bootstrap-tagsinput').children().hasClass('label')) {
+            $(this).parent().find('.bootstrap-tagsinput').children('input[type=text]').attr('placeholder', '');
+        }
+        else {
+            $(this).parent().find('.bootstrap-tagsinput').children('input[type=text]').attr('placeholder', '- Bootstrap tags input');
+        }
+    }).trigger('change');
+
+
+
+    // Plugins
+    // ------------------------------
+
+    // Basic example
+    $(".touchspin-basic").TouchSpin({
+        postfix: '<i class="icon-paragraph-justify2"></i>'
+    });
+
+
+    // Date
+    $('[name="format-date"]').formatter({
+        pattern: '{{99}}/{{99}}/{{9999}}'
+    });
+
+
+    // Basic example
+    $('.maxlength').maxlength();
+
+
+    // Basic initialization
+    $('.multiselect').multiselect({
+        nonSelectedText: 'Bootstrap multiselect',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // Basic initialization
+    $(".selectbox").selectBoxIt({
+        autoWidth: false
+    });
+
+
+    // Override defaults
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark3'
+    }
+
+
+
+    // Basic setup
+    // ------------------------------
+
+    // Basic select
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Select2 select
+    // ------------------------------
+
+    // Basic
+    $('.select').select2();
+
+
+
+    // Styled form components
+    // ------------------------------
+
+    // Checkboxes, radios
+    $(".styled, .multiselect-container input").uniform({ radioClass: 'choice' });
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-pink-400'
+    });
+    
+});

assets/js/pages/form_input_groups.js

@@ -0,0 +1,218 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Input groups
+*
+*  Specific JS code additions for form_input_groups.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Checkboxes/radios in addons
+    // ------------------------------
+
+    // Switchery
+    if (Array.prototype.forEach) {
+        var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
+        elems.forEach(function(html) {
+            var switchery = new Switchery(html);
+        });
+    }
+    else {
+        var elems = document.querySelectorAll('.switchery');
+        for (var i = 0; i < elems.length; i++) {
+            var switchery = new Switchery(elems[i]);
+        }
+    }
+
+
+    // Styled checkboxes/radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice'
+    });
+
+    // Update uniform when select between styled and unstyled
+    $('.input-group-addon input[type=radio]').on('click', function() {
+        $.uniform.update("[name=addon-radio]");
+    });
+
+
+
+    // Touchspin spinners
+    // ------------------------------
+
+    // Basic example
+    $(".touchspin-basic").TouchSpin({
+        postfix: '<i class="icon-paragraph-justify2"></i>'
+    });
+
+
+    // Postfix
+    $(".touchspin-postfix").TouchSpin({
+        min: 0,
+        max: 100,
+        step: 0.1,
+        decimals: 2,
+        postfix: '%'
+    });
+
+
+    // Prefix
+    $(".touchspin-prefix").TouchSpin({
+        min: 0,
+        max: 100,
+        step: 0.1,
+        decimals: 2,
+        prefix: '$'
+    });
+
+
+    // Init with empty values
+    $(".touchspin-empty").TouchSpin();
+
+
+    // Disable mousewheel
+    $(".touchspin-no-mousewheel").TouchSpin({
+        mousewheel: false
+    });
+
+
+    // Incremental/decremental steps
+    $(".touchspin-step").TouchSpin({
+        step: 10
+    });
+
+
+    // Set value
+    $(".touchspin-set-value").TouchSpin({
+        initval: 40
+    });
+
+
+    // Inside button group
+    $(".touchspin-button-group").TouchSpin({
+        prefix: "pre",
+        postfix: "post"
+    });
+
+
+    // Vertical spinners
+    $(".touchspin-vertical").TouchSpin({
+        verticalbuttons: true,
+        verticalupclass: 'icon-arrow-up22',
+        verticaldownclass: 'icon-arrow-down22'
+    });
+
+
+
+    // Touchspin colors
+    // ------------------------------
+
+    //
+    // Addons
+    //
+
+    // Default
+    $(".touchspin-addon-default").TouchSpin({
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>'
+    });
+
+    // Primary
+    $(".touchspin-addon-primary").TouchSpin({
+        prefix_extraclass: 'input-group-addon-primary',
+        postfix_extraclass: 'input-group-addon-primary',
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>'
+    });
+
+    // Danger
+    $(".touchspin-addon-danger").TouchSpin({
+        prefix_extraclass: 'input-group-addon-danger',
+        postfix_extraclass: 'input-group-addon-danger',
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>'
+    });
+
+    // Success
+    $(".touchspin-addon-success").TouchSpin({
+        prefix_extraclass: 'input-group-addon-success',
+        postfix_extraclass: 'input-group-addon-success',
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>'
+    });
+
+    // Warning
+    $(".touchspin-addon-warning").TouchSpin({
+        prefix_extraclass: 'input-group-addon-warning',
+        postfix_extraclass: 'input-group-addon-warning',
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>'
+    });
+
+    // Info
+    $(".touchspin-addon-info").TouchSpin({
+        prefix_extraclass: 'input-group-addon-info',
+        postfix_extraclass: 'input-group-addon-info',
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>'
+    });
+
+
+    //
+    // Buttons
+    //
+
+    // Default
+    $(".touchspin-button-default").TouchSpin({
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>',
+        buttondown_class: "btn btn-default",
+        buttonup_class: "btn btn-default"
+    });
+
+    // Primary
+    $(".touchspin-button-primary").TouchSpin({
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>',
+        buttondown_class: "btn btn-primary",
+        buttonup_class: "btn btn-primary"
+    });
+
+    // Danger
+    $(".touchspin-button-danger").TouchSpin({
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>',
+        buttondown_class: "btn btn-danger",
+        buttonup_class: "btn btn-danger"
+    });
+
+    // Success
+    $(".touchspin-button-success").TouchSpin({
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>',
+        buttondown_class: "btn btn-success",
+        buttonup_class: "btn btn-success"
+    });
+
+    // Warning
+    $(".touchspin-button-warning").TouchSpin({
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>',
+        buttondown_class: "btn btn-warning",
+        buttonup_class: "btn btn-warning"
+    });
+
+    // Info
+    $(".touchspin-button-info").TouchSpin({
+        prefix: '<i class="icon-accessibility"></i>',
+        postfix: '<i class="icon-paragraph-justify2"></i>',
+        buttondown_class: "btn btn-info",
+        buttonup_class: "btn btn-info"
+    });
+    
+});

assets/js/pages/form_inputs.js

@@ -0,0 +1,25 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Basic form inputs
+*
+*  Specific JS code additions for form_input_basic.html page
+*
+*  Version: 1.1
+*  Latest update: Feb 5, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Default file input style
+	$(".file-styled").uniform({
+		fileButtonClass: 'action btn btn-default'
+	});
+
+
+	// Primary file input
+	$(".file-styled-primary").uniform({
+		fileButtonClass: 'action btn bg-blue'
+	});
+
+});