Фильтр

filter.js

/**
 * Класс для фильтра
 *
 * @constructor
 * @param {HTMLElement} form - Форма
 */
var Filter = function(form) {
    this.form = form;
    this.button = form.find('.show-results-button');
    this.clearButton = form.find('.clear-button');
    this.topClearButton = form.find('.clear-button-wrapper.clear-button-wrapper_top');

    this.catalogItems = $('.catalog-el-wrap');
    this.catalogPaging = $('.catalog-paging');
};

/**
 * Применяет параметры к фильтру
 *
 * @param {object} filters - Фильтры, полученные мотодом filtersToJson()
 * @todo Привести в порядок
 */
Filter.prototype.applyFilters = function(filters) {
    // ..
};

/**
 *
 */
Filter.prototype.updateItems = function(data) {
    var paging = $(data).find('.catalog-paging').html();
    var items = $(data).find('.catalog-el-wrap').html();

    this.catalogItems.html(items);
    this.catalogPaging .html(paging);
};

/**
 * Возвращает значения полей фильтра
 * 
 * @returns {array}
 */
Filter.prototype.getFilterParams = function() {
    var filterParams = [
        this.form.serialize()
    ];

    return filterParams;
};

/**
 * Возвращает URL огласно текущим значениям фильтра
 * 
 * @returns {string} - Строка с URL
 */
Filter.prototype.getUrl = function() {
    var url = this.form.attr('action');
    var filterParams = this.getFilterParams();

    return url + '?' + filterParams;
};

/**
 * Возвращает URL без значений фильтра
 * 
 * @returns {string} - Строка с URL
 */
Filter.prototype.getDirectionUrl = function() {
    var url = this.form.attr('action');
    var directionInput = this.form.find('input.directions');

    if (directionInput.length > 0) {
        var directionParam = directionInput.attr('name') + '=' + directionInput.val();
        directionUrl = url + '?' + directionParam;
    } else {
        directionUrl = url;
    }

    return directionUrl;
};

/**
 * Получает параметры фильтра с сервера
 *
 * @param {string} url
 * @param {function} callback
 */
Filter.prototype.fetchFilters = function(url, callback) {
    console.log('Filter.fetchFilters');

    // $.loadingScreen('show');

    var url = url || this.form.attr('action');
    var filterParams = this.getFilterParams();

    var queryParams = [
            filterParams
            , $.param({
                data: 'json',
                type: 'filters',
                ajax: '1',
            })
        ]
        .join('&');

    $.getJSON(
        url
        , queryParams
        , function(data) {
            // $.loadingScreen('hide');

            callback(data.filters);
        }
    );
};

/**
 * Получает HTML-код товаров по текущим значеням полей фильтра
 * 
 * @param {string} url
 * @param {function} callback
 */
Filter.prototype.fetchItems = function(url, callback) {
    console.log('Filter.fetchItems');

    $.loadingScreen('show');

    var url = url || this.form.attr('action');
    var filterParams = this.getFilterParams();

    var queryParams = [
            filterParams
            , $.param({
                data: 'json',
                type: 'items',
                ajax: '1',
            })
        ]
        .join('&');

    $.getJSON(
        url
        , queryParams
        , function(data) {
            $.loadingScreen('hide');

            callback(data.items);
        }
    );
};

/**
 * Получает параметры фильтра и HTML-код товаров по текущим значеням полей фильтра
 * 
 * @param {string} url
 * @param {function} callback
 */
Filter.prototype.fetchFiltersAndItems = function(url, callback) {
     console.log('Filter.fetchFiltersAndItems');

    $.loadingScreen('show');

    var url = url || this.form.attr('action');
    var filterParams = this.getFilterParams();

    var queryParams = [
            filterParams
            , $.param({
                data: 'json',
                type: 'all',
                ajax: '1',
            })
        ]
        .join('&');

    $.getJSON(
        url
        , queryParams
        , function(data) {
            $.loadingScreen('hide');

            callback(data.filters, data.items);
        }
    );
};

/**
 * Отображает кнопку «Показать»
 * 
 * @param {HTMLElement} nearElement - Элемент, рядом с которым следуем вывести кнопку
 */
Filter.prototype.showButton = function(nearElement) {
    console.log('Filter.showButton');

    var buttonTop = nearElement.offset().top
        - this.form.offset().top
        - this.button.height() / 2;

    this.button
        .css('top', buttonTop)
        .attr('href', this.getUrl())
        .removeClass('show-results-button_hidden');
};

/**
 * Скрывает кнопку «Показать»
 */
Filter.prototype.hideButton = function(nearElement) {
    this.button
        .addClass('show-results-button_hidden');
};

/**
 * Очищает значения фильтра
 *
 * @todo Привести в порядок
 */
Filter.prototype.clearFilter = function() {
    console.log('Filter.clearFilter');

        
    // ...

    var filter = this;
    var url = this.getDirectionUrl();
    // Переходим на страницу без фильтров
    // location.href = this.getDirectionUrl();

    filter.fetchFiltersAndItems(url, function(filters, items) {
        history.pushState({}, 'title', url);

        filter.applyFilters(filters);
        filter.updateItems(items);
        
        filter.hideButton();
        filter.hideTopClearButton();
    });
};

Filter.prototype.showTopClearButton = function() {
    this.topClearButton
        .slideDown();
}

Filter.prototype.hideTopClearButton = function() {
     this.topClearButton
        .slideUp();
}

/**
 * Инициализирует слайдер
 *
 * @todo Привести в порядок
 * 
 * @param {HTMLElement} element - Элемент
 * @param {number} initial_min - начальный минимум
 * @param {number} initial_max - начальный максимум
 * @param {number} used_min - выбранный минимум
 * @param {number} used_max - выбранный максимум
 */
Filter.slider = function(element, initial_min, initial_max, used_min, used_max) {
    // ...
};

/**
 * Привязывает события к фильтру
 */
Filter.prototype.initialize = function() {
    console.log('Filter.initialize');

    var filter = this;

    // События
    filter.form
        .find('.filter_item').on('change', function() {
            filter.showButton($(this));

            filter.fetchFilters(null, function(filters) {
                filter.applyFilters(filters);
            });
        });

    // Слайдеры
    Filter.slider(
        filter.form
            .find('.filter_slider')
    );

    // Кнопки сброса фильтра
    this.clearButton.on('click', function() {
        filter.clearFilter();
    });

    // Кнопка «Показать»
    this.button.on('click', function(e) {
        var url = $(this).attr('href');
        filter.fetchItems(url, function(items) {
            history.pushState({}, 'title', url);

            filter.updateItems(items);

            filter.hideButton();
            filter.showTopClearButton();
        });

        e.preventDefault();
    });

    // Страницы
    $(document).on('click', '.page_link', function(event) {
        var url = $(this).attr('href');
        
        filter.fetchItems(url, function(items) {
            history.pushState({}, 'title', url);

            filter.updateItems(items);
            
            filter.showTopClearButton();

            // Поднимает страницу вверх
            setTimeout(
                function() {
                    $('html, body').animate({ scrollTop: 0 }, 'slow');
                }
                , 200
            );
        });

        event.preventDefault();
    });
};

$(function() {
    var filter = new Filter($('#filter_form'));
    filter.initialize();
});