JS reference

This is the javascript reference section. You will find here what you need to know to get started with the theme's JS. All the following code snippets can be found in the /assets/js/nephos.js file.

Pageloader

If you wish to change the behavior of the page loader component, you'll have to edit this snippet:

$(document).ready(function(){

    //Page loader
    if ($('.pageloader').length) {

        $('.pageloader').toggleClass('is-active');

        $(window).on('load', function() {
        var pageloaderTimeout = setTimeout( function() {
            $('.pageloader').toggleClass('is-active');
            $('.infraloader').toggleClass('is-active')
            clearTimeout( pageloaderTimeout );
        }, 700 );
        })
    }
});

Responsive toggle

If you want to change the way the responsive menu toggle behaves, you'll have to edit this snippet:

//Mobile menu toggle
if ($('.navbar-burger').length) {
    $('.navbar-burger').on("click", function(){
        $(this).toggleClass('is-active');
        if ($('.navbar-menu').hasClass('is-active')) {
            $('.navbar-menu').removeClass('is-active');
        } else {
            $('.navbar-menu').addClass('is-active');
        }
    });
}

Feather icons

A single line is needed to initialize feather icons :

//Initialize Feather Icons
feather.replace();

Use the following pattern to insert your icons

<i data-feather="*"></i>

Where * stands for the icon name. A list of all available icons can be found Here.

Background images

You can set a background image on any element by using data-attributes. Here is the snippet that handles this :

//Attribute background images
if ($('.has-background-image').length) {
    $(".has-background-image").each(function() {
        var bgImage = $(this).attr('data-background');
        if (bgImage !== undefined) {
            $(this).css('background-image', 'url(' + bgImage + ')');
        }
    }
)}

Use the following pattern to set your backgrounds

<div class="some-div" data-background="path/to/your/image.jpeg"></div>

iziToast

This is how you can create an iziToast object:

iziToast.show({
    class: 'success-toast',
    icon: 'fa fa-heart-o',
    title: 'Successfuly removed from Wishlist',
    message: '',
    titleColor: '#fff',
    messageColor: '#fff',
    iconColor: "#fff",
    backgroundColor: '#FF7273',
    progressBarColor: '#444F60',
    position: 'bottomRight',
    transitionIn: 'fadeInUp',
    close: false,
    timeout: 2000,
    zindex: 99999,
});

You can easily use it in your callbacks, when needed. Check the plugin's documentation for more full documented examples.

Chosen JS

Create javascript select boxes easily :

//Chosen select init
if ($('.chosen-select').length) {
    $(".chosen-select").chosen({
        disable_search_threshold: 6,
        width: '100%'
    });
}

Then give the chosen-select class to a native select element and watch the magic.

webui popovers

Create new popovers by creating a new option object and linking it to a CSS class:

//Popovers
if ($('.has-popover-top').length) {
    $('.has-popover-top').webuiPopover({
        trigger:'hover',
        placement: 'top',
        width: 280,
        animation: 'pop'
    });

Read the plugin documentation to see all available options.

Easy Autocomplete

Create autocomplete easily following the plugin documentation. Here is an advanced example using templating :

//Users autocomplete
if ($('#users-autocpl').length) {
    var usersOptions = {
        url: "assets/js/easyAutocomplete/data/persons.json",
        getValue: "name",
        template: {
            type: "custom",
            method: function(value, item) {
                return "<div class=" + 'template-wrapper' + "><img class=" + 'autocpl-avatar' + " src='" + item.pic + "' /><div class=" + 'entry-text' + ">" + value + "<br><span>" + item.email + "</span></div></div> ";
            }
        },
        highlightPhrase: false,
        list: {
            maxNumberOfElements: 3,
            showAnimation: {
                type: "fade", //normal|slide|fade
                time: 400,
                callback: function() {}
            },
            match: {
                enabled: true
            }
        },
    };

    $("#users-autocpl").easyAutocomplete(usersOptions);
}

The demo data is fetched from a json file in the data directory of the assets/data/ folder. It is then copied to the plugin folder on the production site.

Mobile Mode

Nephos also uses powerful javascript media queries to check the screen width on load and on resize. Those media queries come in two flavors, one for the normal pages and the other one for the checkout pages, which display a step progress bar. If you want to make some changes in this behavior, here is the code that controls it :

//Mobile mode
if ($('#mobile-mode, #sidebar-mode').length) {

    //mobile mode
    $('#mobile-mode, #sidebar-mode').on('click', function(){
        $('.icon-menu li a.is-active').removeClass('is-active');
        $('.mobile-navbar').toggleClass('is-active');
        $('.shop-wrapper').toggleClass('is-mobile-mode');
        $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').toggleClass('is-pushed-mobile');
        $('.pageloader, .infraloader').toggleClass('is-full');
    })

    if (window.matchMedia('(max-width: 768px)').matches) {
        $('.mobile-navbar').addClass('is-active');
        $('.shop-wrapper').addClass('is-mobile-mode');
        $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').addClass('is-pushed-mobile');
        $('.pageloader, .infraloader').addClass('is-full');
    } else {
        $('.mobile-navbar').removeClass('is-active');
        $('.shop-wrapper').removeClass('is-mobile-mode');
        $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').removeClass('is-pushed-mobile');
        $('.pageloader, .infraloader').removeClass('is-full');
    }

    //resize handler
    $(window).on('resize', function(){
        if (window.matchMedia('(max-width: 768px)').matches) {
            $('.mobile-navbar').addClass('is-active');
            $('.shop-wrapper').addClass('is-mobile-mode');
            $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').addClass('is-pushed-mobile');
            $('.pageloader, .infraloader').addClass('is-full');
        } else {
            $('.mobile-navbar').removeClass('is-active');
            $('.shop-wrapper').removeClass('is-mobile-mode');
            $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').removeClass('is-pushed-mobile');
            $('.pageloader, .infraloader').removeClass('is-full');
        }
    })
}

//Checkout mobile mode
if ($('.action-bar').length) {

    //JS Media Query
    if (window.matchMedia('(max-width: 768px)').matches) {
        $('.action-bar').addClass('is-mobile');
        $('.shop-wrapper').addClass('is-mobile-mode');
        $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').addClass('is-pushed-mobile');
        $('.pageloader, .infraloader').addClass('is-full');
    } else {
        //$('.mobile-navbar').removeClass('is-active');
        $('.shop-wrapper').removeClass('is-mobile-mode');
        $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').removeClass('is-pushed-mobile');
        $('.pageloader, .infraloader').removeClass('is-full');
    }

    //resize handler
    $(window).on('resize', function(){
        if (window.matchMedia('(max-width: 768px)').matches) {
            $('.action-bar').addClass('is-mobile');
            $('.shop-wrapper').addClass('is-mobile-mode');
            $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').addClass('is-pushed-mobile');
            $('.pageloader, .infraloader').addClass('is-full');
        } else {
            //$('.mobile-navbar').removeClass('is-active');
            $('.shop-wrapper').removeClass('is-mobile-mode');
            $('.main-sidebar, .shop-quickview, .cart-quickview, .filters-quickview').removeClass('is-pushed-mobile');
            $('.pageloader, .infraloader').removeClass('is-full');
        }
    })
}