Shell File Manager

// Следователь за изменениями ширины окна
var onChangeWidth = function (actions) { $(window).resize( function () { return actions() } ) };
function mq( $deviceSize, $options ){
  // Значения по умолчанию
  var options = ( typeof $options           !== 'undefined' ) ? $options                   : 'undefined',
      small   = ( typeof options.sizeSmall  !== 'undefined' ) ? options.sizeSmall  + 'px' : '480px',
      medium  = ( typeof options.sizeMdium  !== 'undefined' ) ? options.sizeMdium  + 'px' : '768px',
      large   = ( typeof options.sizeLarge  !== 'undefined' ) ? options.sizeLarge  + 'px' : '1170px';
  
  // Установка matchMedia
  switch ( $deviceSize ) {
    case 'medium':
      return window.matchMedia( "(max-width: " + medium + ")" ).matches
      break
    case 'large':
      return window.matchMedia( "(max-width: " + large + ")" ).matches
      break
    case 'small':
    default:
      return window.matchMedia( "(max-width: " + small + ")" ).matches
      break
  }
}

var mmocoin = {};
mmocoin.catalog = function(){
  // Проверятель на видимые карточки товаров. 
  function getVisibleItems(elem, actions){
    $(elem).each(function(){
        var item = $(this);
        if (item.attr('style') !== undefined){
          if ( item.attr('style').match('inline-block') ) {      
            actions(item);
          }
        }
    });
  }

  // Ограничитель высоты обёртки каталога. 
  function limiterHeightGamesWrapper(elem) {
    var $itemHeight = null,
        $wrapper = $(elem),
        $btnShowMoreGames  = $('.show-all');

    function limitHeight(){
      // Проверка на видимые карточки товаров
      getVisibleItems('.products__item', function(item) {
        $itemHeight = item.height(); // Получаем высоту итема
        return false; // после первого совпадения выходим
      });

      var $descriptionHeight = $('.products__description').height() + 20, // высота блока с текстом
          height = $itemHeight + ($descriptionHeight / 2), // высота одного итема + высота блока с текстом
          mqs = mq('small'), mqm = mq('medium'), mql = mq('large');

      if ( mqs ) {
        $wrapper.height( height * 6 ); // мобильный вариант
      } else if ( mql ) {
        $wrapper.height( height * 2 ); // вариант для планшетов
      } else {
        $wrapper.height( height * 2 ); // дексктопный вариант
      }
    }

    onChangeWidth(function(){

      $btnShowMoreGames  = $('.show-all'); 

      if ( $btnShowMoreGames.is(' :visible') ) {
        limitHeight();          
      } else {     
        return false;  
      }

    });

    limitHeight(); 

    return {
            // Очиститель ограничений example use: limiterHeightGamesWrapper('.products__wrapper').reset()
            'reset': function() {
                        $wrapper.css('height', 'auto');
                      }
           }
  }

  // Ограничитель отображаемых игр
  function limiterDisplayGames() {

    var  displayedGamesNum = 6; // колличество видимых игр

    var $productsItem = $('.products__item'),
        $btnShowMoreGames  = $('.show-all');

    var visibleGamesCounter = (function(){
      var counter = [];

      // Проверка на видимые карточки товаров
      getVisibleItems($productsItem, function(item){
         counter.push(item);
      });
      return counter.length
    })();

    if ( visibleGamesCounter > displayedGamesNum ) { // Если в категории больше игр чем, колличество видимых игр

      // Отображаем все игры
      (function showAllGames(){    
        // Скрываем лишние игры
        for (var i = displayedGamesNum; i < visibleGamesCounter; i++) {
           $($productsItem[i]).hide();
        }
        // Ограничиваем высоту обёртки
        limiterHeightGamesWrapper('.products__wrapper');
        // Добавляем текст кнопке
        var wordTheGame; switch (visibleGamesCounter - displayedGamesNum) {
          case 1:
            wordTheGame = '';
            break;
          case 2:
          case 3:
          case 4:
            wordTheGame = '';
            break;
          default:
            wordTheGame = '';
            break;          
        }
        $btnShowMoreGames.children('.count').text( visibleGamesCounter - displayedGamesNum + ' Items ' + wordTheGame);
        // Показываем кнопку
        $btnShowMoreGames.fadeIn(200);
      })();

      // Добавляем обработчик клика по кнопке
      $btnShowMoreGames.click(function() {
        // Скрываем лишние игры
        (function hideExtraGames(){
          for (var i = displayedGamesNum - 1; i < visibleGamesCounter; i++) {
            $($productsItem[i]).show('slow');
          }

          limiterHeightGamesWrapper('.products__wrapper').reset();

          $('html, body').animate({
            scrollTop: $($productsItem[displayedGamesNum - 1]).offset().top + $productsItem.height() - 50
          }, 500);

          $btnShowMoreGames.hide();
        })();
      });   

    } else if ( visibleGamesCounter < displayedGamesNum ) { // Если в категории меньше игр, чем колличество видимых игр

      // Скрываем кнопку
      $btnShowMoreGames.hide();
      // Ограничиваем высоту обёртки
      limiterHeightGamesWrapper('.products__wrapper');

    }
  }

  // Глобальный Метод catalogAccordion
  (function($){
    jQuery.fn.catalogAccordion = function(items){

      function showMenu(panel){
        panel.attr('style', 'display:none;').slideDown(300);
        panel.attr('data-open', 'true');
        panel.siblings('.js-catalog-filtersTrigger').addClass('openned');
      }  

      function hideMenu(panel){

        panel.slideUp(300);
        panel.attr('data-open', 'false');
        panel.siblings('.js-catalog-filtersTrigger').removeClass('openned');        

        if ( !items.hasClass('current') ) {

          var panels = items.parent('.catalog-filters__panel');

          panels.each(function(){          
            if ( $(this).attr('data-open') === 'true' ){
              $(this).parent().addClass('current').click();
            }
          });

          if ( !items.hasClass('current') ) {
            $(items[0]).addClass('current').click();
          }

        }
      }

      var make = function(){
        var thisItems = $( ".js-catalog-filtersTrigger[data-lvl='"+$(this).attr('data-lvl')+"'" );

        $(this).bind( 'click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          $('.show-all').hide();

          $('html, body').animate({
            scrollTop: $('.game-catalog__content').offset().top -50
          }, 500);


          var filter = $(this).parent().attr('data-filter');
          $('.products')
            .mixItUp('filter', filter)
            .on('mixEnd', function(){
              limiterDisplayGames();
            });

          var item = $(this),
              panel = item.siblings('.catalog-filters__panel');

          items.removeClass('current');
          item.parent().addClass('current');

           if ( panel.attr('data-open') === 'false' || !panel.attr('data-open') ) {


            hideMenu( thisItems.siblings('.catalog-filters__panel') );

            showMenu( panel );

          } else {   
            var subPanel = panel.find('.catalog-filters__panel');
            if (panel.find('.catalog-filters__panel').attr('data-open') === 'true' ){            
              panel.find('.catalog-filters__panel').attr('data-open', 'false');
              hideMenu( panel.find('.catalog-filters__panel') );
            }
            item.parent().removeClass('current');      
            hideMenu( panel );  
          }
        });


      };

      return this.each(make); 
    };
  })(jQuery);
  
  var catalogFiltersMenu = $('.catalog-filters__list'),
      items = catalogFiltersMenu.find('.catalog-filters__item'),
      items1 = catalogFiltersMenu.find(".js-catalog-filtersTrigger[data-lvl='1']"),
      items2 = catalogFiltersMenu.find(".js-catalog-filtersTrigger[data-lvl='2']"),
      items3 = catalogFiltersMenu.find(".js-catalog-filtersTrigger[data-lvl='3']");

  items1.catalogAccordion(items);
  items2.catalogAccordion(items);
  items3.catalogAccordion(items);

  $('.products')
    .mixItUp()
    .on('mixLoad', function(){
      limiterDisplayGames();
    });






  // function fixAccordionItit(){
  //     var mqs = mq('small'), mqm = mq('medium'), mql = mq('large');
  //     var accordWidth = $('.game-catalog__sidebar').width();
  //     $('.catalog-filters').width(accordWidth);

  //     if ( !mql ) {
  //         $('html, body').clearQueue();
  //         (!window.requestAnimationFrame) ? fixAccordion() : window.requestAnimationFrame(fixAccordion);
  //     } else {
  //       $('.catalog-filters').removeClass('is-fixed');
  //     }
  // }



  function positionCatalogFilters(){
    var mqs = mq('small'), mqm = mq('medium'), mql = mq('large');
    if ( !mql ) {
        $('.game-catalog__sidebar').css({
          'top': 0,
          'display': 'block'
        });
    } else {
      $('.game-catalog__sidebar').css({
          'display': 'none'
        });
    }
  }
  $(window).on('scroll', function(){ 
    fixAccordionItit();
   });
  onChangeWidth(function(){ 
    positionCatalogFilters();
    fixAccordionItit();
  });  

  $('.catalog-filters__placeholder-wrapper').click(function(){


    if ( $('.game-catalog__sidebar').css('display') !== 'none' ) {
      $('.game-catalog__sidebar').slideUp('slow');
    } else{
      // var 
            $('.game-catalog__sidebar')
          .css({
          'top': ($(this).offset().top - $(window).scrollTop()) + 40 + 'px',
          });
      $('.game-catalog__sidebar')
        .slideDown('slow');   
    }

  });

  $(window).on('scroll', function(){
    var mqs = mq('small'), mqm = mq('medium'), mql = mq('large');
    if (mql) {
      $('.game-catalog__sidebar')
        .css({
        'top': ($('.catalog-filters__placeholder-wrapper').offset().top - $(window).scrollTop()) + 40 + 'px',
        });
    }
  });
}


jQuery(document).ready(function(){
  mmocoin.catalog();
});