LilSchool/web/src/js/app_def.js

// example of simple includes for js
//=include lib/jquery.min.js
//=include lib/owl.carousel.min.js
//=include lib/jquery-ui.min.js
//=include lib/datepicker-ru.js

// global
var mobileWidth = 600;

// header
(function(){
    var header = $('.js-header'),
        menu = header.find('.js-header-menu'),
        wrap = header.find('.js-header-wrap'),
        close = header.find('.js-header-close'),
        section = header.find('.js-header-section'),
        list = header.find('.js-header-list');

    menu.on('click', function(e){
        if ($(window).width() < mobileWidth) {
            e.preventDefault();
            wrap.addClass('visible');
        }
    });

    close.on('click', function(e){
        if ($(window).width() < mobileWidth) {
            e.preventDefault();
            wrap.removeClass('visible');
            $(window).scrollTop(0);
        }
    });

    section.on('click', function(e){
        if ($(window).width() < mobileWidth) {
            e.preventDefault();
            var _this = $(this);

            _this.toggleClass('open');
            _this.next().slideToggle();
        }
    });
}());

// search
(function(){
    var search = $('.js-search'),
        input = search.find('.js-search-input'),
        btn = search.find('.js-search-btn');

    btn.on('click', function(e){
        if ($(window).width() >= mobileWidth) {
            if (!search.hasClass('open')) {
                e.preventDefault();
            }
            search.addClass('open');
            setTimeout(function(){
                input.focus();
            }, 200);
        }
    });

    search.on('click', function(e){
        e.stopPropagation();
    });

    $(document).on('click', function(){
        search.removeClass('open');
        input.val('');
    });
}());

// toggle
(function(){
    $('.js-toggle-head').on('click', function(e){
        e.preventDefault();
        var _this = $(this);
        _this.toggleClass('active');
        _this.next().slideToggle();
    });
}());

// auth
(function(){
    var auth = $('.js-auth'),
        type = auth.find('.js-auth-type'),
        tab = auth.find('.js-auth-tab'),
        login = auth.find('.js-auth-login'),
        pass = auth.find('.js-auth-pass'),
        goPass = auth.find('.js-auth-go-pass'),
        goEnter = auth.find('.js-auth-go-enter');

    type.on('click', function(e){
        e.preventDefault();
        var _this = $(this),
            index = _this.index();

        type.removeClass('active');
        _this.addClass('active');
        tab.hide();
        tab.eq(index).fadeIn();
    });

    goPass.on('click', function(e){
        e.preventDefault();

        login.hide();
        pass.fadeIn();
    });

    goEnter.on('click', function(e){
        e.preventDefault();

        pass.hide();
        login.fadeIn();
    });
}());

// select
(function(){
    var select = $('.js-select');
    if (select.length) {
        select.each(function(){
            var _this = $(this),
                head = _this.find('.js-select-head'),
                option = _this.find('.js-select-option'),
                input = _this.find('.js-select-input');

            head.on('click', function(e){
                e.preventDefault();
                e.stopPropagation();

                if (_this.hasClass('active')) {
                    _this.removeClass('active');
                } else {
                    select.removeClass('active');
                    _this.addClass('active');
                }
            });

            option.on('click', function(e){
                e.preventDefault();
                _this.addClass('selected');

                var _thisOption = $(this),
                    value = _thisOption.text();

                head.text(value);
                
                option.removeClass('active');
                _thisOption.addClass('active');

                input.val(value);
            });
        });

        $(document).on('click', function(){
            select.removeClass('active');
        });
    }
}());

// datepicker
(function(){
    var datepicker = $('.js-datepicker');
    if (datepicker.length) {
        $.datepicker.setDefaults( $.datepicker.regional["ru"]);
        datepicker.each(function(){
            $(this).datepicker({
                dateFormat: "dd/mm/yy"
            });
        });
    }
}());

// tabs
(function(){
    var tabs = $('.js-tabs');
    if (tabs.length) {
        tabs.each(function(){
            var _this = $(this),
                btn = _this.find('.js-tabs-btn'),
                item = _this.find('.js-tabs-item');

            btn.on('click', function(e){
                e.preventDefault();

                var _thisBtn = $(this),
                    index = _thisBtn.index();

                btn.removeClass('active');
                _thisBtn.addClass('active');
                item.hide();
                item.eq(index).fadeIn();
            });
        });
    }
}());

// popup
(function(){
    var body = $('body'),
        popup;

    $('body').on('click', '[data-popup]', function(e){
        e.preventDefault();
        e.stopPropagation();

        var data = $(this).data('popup');
        popup = $(data);
        showPopup();
    });

    $('.js-popup-close').on('click', function(e){
        e.preventDefault();
        hidePopup();
    });

    $('body').on('click', '.js-outer', function(){
        if (popup != undefined) {
            hidePopup();
        }
    });

    $('.js-popup-wrap').on('click', function(e){
        e.stopPropagation();
    });

    $(document).keyup(function(e){
      if (e.keyCode === 27) hidePopup();
    });

    function showPopup(){
        body.addClass('no-scroll');
        popup.addClass('open');
        setTimeout(function(){
            popup.addClass('visible');
        }, 100);
    }

    function hidePopup(){
        body.removeClass('no-scroll');
        popup.removeClass('visible');
        setTimeout(function(){
            popup.removeClass('open');
        }, 300);
    }
}());