petjacatalog.js

/**
 * User: Petja
 * Date: 12.02.14
 * Time: 18:01
 */

(function(window, document, $, undefined){
    var Catalog = {
        catalogUrl: '/assets/components/teamn/connector.php?action=catalog/update&ctx=web',
        $doc: $(document),
        priceInput: 'input#price-slider', // Инпут слайдера прайса
        priceReset: '#priceWr a.reset', // Сброс прайса
        resetAll: '#petja-catalog .reset-all a', // Сброс прайса
        allHeaderCarets: '#flt-wrapper a.header', // Все ссылки(-заголовок-каретка)
        wrapper: '.chb-wrapper', // Обертки блоков с чекбоксами, например exType и exMedical
        checkBlocks: '#flt-wrapper .chb-wrapper', // Обертки блоков с чекбоксами, например exType и exMedical
        checkInputs: '#flt-wrapper .chb-wrapper input', // input[type=checkbox|radio] внутри оберток
        checkReset: '#flt-wrapper .chb-wrapper a.reset', // input[type=checkbox|radio] внутри оберток
        filtersForm: '#petjaFilters', // Форма с фильтрами и ценой
        searchForm: 'form#searchWr', // Форма поиска
        searchInput: 'form#searchWr input[name=search]', // Текстовый инпут формы поиска
        searchResetButton: 'form#searchWr button.reset', // Кнопка сброса формы поиска
        sortingLinks: '#sortWr a.sortby', // Ссылки сортировки
        paginationLink: '#pagWr li a', // Ссылки пагинации
        data: {
            price:'',search:'',sortby:'',page:'','exType[]':'', // Если exType стал чекбоксами, то поменять на массив!
            'vendor[]':[],'exMedical[]':[],'exPsycho[]':[],'exUnit[]':[],'exLeaf[]':[],'exSort[]':[],'exPlace[]':[]
        }
    };

    Catalog.initialize = function(){

        $.cookie.raw = true;

        Catalog.Carets.initialize();
        Catalog.Controls.initialize();
        // Отсканировать в глобальный объект все данные со всех элементов
        if(!Catalog.initialized){
            Catalog.Controller.data.scanAll();
            Catalog.initialized = true;
        }
        // Что делать?
        /**
         * 1) Сделать глобальное хранилище состояний всех элементов управления
         * 2) Сделать чтобы глобальное состояние дублировалось в урл
         * 3) Навешать везде события на элементы управления
         * 4) На событиях обновлять глобальное состояние и урл
         * 5) Сделать посредническую функцию - которая при смене состояния проверет и предопределяет какое-либо поведение "константой"
         */
        $().on('resize',function(){
            console.log('ttt');
            Catalog.Controls.rightPanel.priceSlider.$slider.ionRangeSlider('update');
        });
        Catalog.$doc.on('click', Catalog.resetAll, function(e){
            e.preventDefault();
            Catalog.Controller.data.resetAll();
        });
    };

    Catalog.Controller = {
        data: {
            pushArray: function(array,mode){
                mode = mode || false;
                $.each(array,function(i,v){
                    if(v.value){
                        if(!$.isArray(Catalog.data[v.name])){
                            Catalog.data[v.name] = v.value;
                        }else if($.inArray(v.value, Catalog.data[v.name]) == -1){
                            Catalog.data[v.name].push(v.value);
                        }
                    }
                });
                if(mode != 'firstScan'){
                    this.sync();
                }
            },
            pushVal: function(name,val,who){
                if(who == 'checkbox'){
                    Catalog.data.price = Catalog.data.page = '';
                }
                //Catalog.Controller.data.rmVal('page');
                if(name == 'exType[]'){
                    Catalog.data['price'] = '';
                    Catalog.priceChanged = false;
                }
                if(!$.isArray(Catalog.data[name])){
                    Catalog.data[name] = val;
                    this.sync();
                }else if($.inArray(val, Catalog.data[name]) == -1){
                    Catalog.data[name].push(val);
                    this.sync();
                }
            },
            rmVal: function(name,val,who){
                who = who || false;
                if(who == 'checkbox'){
                    Catalog.data.price = '';
                }
                val = val || '';
                if(!$.isArray(Catalog.data[name])){
                    Catalog.data[name] = '';
                    if(name != 'price'){
                        this.sync();
                    }
                }else if(val.length == 0){
                    Catalog.data[name] = [];
                    this.sync();
                }else if($.inArray(val, Catalog.data[name]) != -1){
                    var index = Catalog.data[name].indexOf(val);
                    Catalog.data[name].splice(index,1);
                    this.sync();
                }
            },
            sync: function(){
                if(window.history && history.pushState){
                    Catalog.Controller.url.set(Catalog.data);
                }
                if($.Tabs){
                    $.Tabs.Controls.hide();
                }
                this.serverUpdate(Catalog.data);
            },
            serverUpdate: function(dataToPost){
                dataToPost = this.clear(dataToPost);
                dataToPost['pageId'] = cGlobals.pageId;
                $.post(Catalog.catalogUrl,dataToPost,function(xhr){
                    var receivedData = $.parseJSON(xhr);
                    $.each(receivedData, function(name,value){
                        if(name == 'search_word'){
                            $(Catalog.searchInput).val(value);
                        }else if(name == 'price_value'){
                            $(Catalog.priceInput).val(value);
                            var prices = value.split('|');
                            Catalog.Controls.rightPanel.priceSlider.$slider.ionRangeSlider('update',{
                                from: prices[0]
                                ,to: prices[1]
                            });
                        }
                        $('#' + name).empty().html(value);
                    });
                    Catalog.Carets.state.init();
                });
            },
            clear: function(data){
                var outData = {};
                $.each(data,function(i,v){
                    if(v){
                        switch(i){
                            case 'page':
                                outData['page'] = Number(v);
                                break;
                            default:
                                outData[i] = v;
                        }
                    }
                });
                return outData;
            },
            scanAll: function(){
                this.pushArray(Catalog.Controls.rightPanel.scan(),'firstScan');
            },
            resetAll: function(){
                Catalog.Controls.rightPanel.priceSlider.handler('reset');
                $.each(Catalog.data, function(i,v){

                    var name = i.replace('[]','');
                    $.removeCookie('carets_'+name, { path: '/' });
                    if($.isArray(v)){
                        Catalog.data[i] = [];
                    }else{
                        Catalog.data[i] = '';
                    }
                });
                this.sync();
            }
        },
        url: {
            isHash: false,
            data: {},
            // Получаем объект данныч из урла
            /*scan: function() {
                var uriData, vars, urlObj = {},
                    pos = window.location.href.indexOf('?');
                if(pos != -1){
                    uriData = decodeURIComponent(window.location.href.substr(pos + 1));
                }else if(window.location.href.indexOf('#') != -1){
                    uriData = decodeURIComponent(window.location.hash.substr(1));
                    this.isHash = true;
                }
                uriData = uriData.split('&');
                $.each(uriData, function(i,v){
                    var item = v.split('='),
                        name = item[0],
                        val = item[1];
                    if(val && name){
                        if($.isArray(Catalog.data[item[0]])){
                            if(urlObj[name] == undefined){
                                urlObj[name] = [];
                            }
                            if($.inArray(val,urlObj[name]) == -1){
                                urlObj[name].push(val);
                            }
                        }else{
                            urlObj[name] = val;
                        }
                    }
                });
                this.data = urlObj;
            },*/
            // Заменяем урл на данные из объекта
            set: function(data){
                var urlString = '';
                $.each(data,function(name,val){
                    if(val && (val.length > 0 || val > 0)){
                        var value = '';
                        if(name == 'price'){
                            return true;
                        }
                        if($.isArray(val)){
                            $.each(val,function(i,v){
                                if(value.length == 0){
                                    value = v;
                                }else{
                                    value = [value, v].join('|');
                                }
                            });
                        }else{
                            value = val;
                        }
                        urlString += name + '=' + value + '&';
                    }
                });
                urlString = '?' + urlString.replace(/&$/,"");
                window.history.pushState(urlString, '', document.location.pathname + urlString);
            }
        }
    };

    Catalog.Carets = {
        // Что делать?
        /**
         * 1) Навешать события на каретки
         * 2) При активации события, собирать состояние кареток в объект
         * 3) Складывать этот объект в сессию
         * 4) При загрузки страницы
         */
        initialize: function(){
            this.state.init();
            Catalog.$doc.on('click.CatalogNS',Catalog.allHeaderCarets,function(e){
                e.preventDefault();
                Catalog.Carets.handler(e.target,'toggleCaret');
            });
            Catalog.$doc.on('click.CatalogNS',Catalog.checkReset,function(e){
                e.preventDefault();
                //console.log('checkReset click');
                Catalog.Carets.handler(e.target,'reset');
            });
        },
        handler: function(el,action){
            action = action || false;

            // Ссылка свернуть/развернуть:
            var $linkHeader = $(el);
            var $wrapper = $linkHeader.closest(Catalog.wrapper);

            switch (action){
                case 'toggleCaret':
                    $wrapper.toggleClass('closed');
                    Catalog.Carets.state.turn($wrapper);
                    break;
                case 'reset':
                    $wrapper.find(Catalog.checkInputs).removeAttr('checked');
                    if(!$wrapper.hasClass('closed')){
                        $wrapper.addClass('closed');
                    }
                    Catalog.Carets.state.turn($wrapper);
                    Catalog.Controller.data.rmVal($wrapper.data('name')+'[]');
                    break;
            }


        },
        state: {
            init: function(){
                var allCookies = $.cookie();
                if($.cookie('enable')){
                    $(Catalog.checkBlocks).each(function(i,v){
                        var $el = $(v),
                            name = $el.data('name'),
                            opened = !$el.hasClass('closed'),
                            cooked = false;

                        if(allCookies['carets_'+name] == 1){
                            cooked = true;
                        }
                        if(cooked && !opened){
                            $el.removeClass('closed');
                        }else if(!cooked && opened){
                            $el.addClass('closed');
                        }
                    });
                }else{
                    $(Catalog.checkBlocks).each(function(i,v){
                        var $el = $(v),
                            name = $el.data('name'),
                            opened = !$el.hasClass('closed');

                        if(!opened){
                            $.removeCookie('carets_'+name, { path: '/' });
                        }else{
                            $.cookie('carets_'+name, '1', { expires: 1, path: '/' });
                        }
                    });
                }
            },
            turn: function($wrapper){
                var name = $wrapper.data('name');
                if($wrapper.hasClass('closed')){
                    $.removeCookie('carets_'+name, { path: '/' });
                    $.cookie('enable', '1', { expires: 1, path: '/' });
                }else{
                    $.cookie('carets_'+name, '1', { expires: 1, path: '/' });
                    $.cookie('enable', '1', { expires: 1, path: '/' });
                }
            }
        }

    };

    Catalog.Controls = {
        initialize: function(){
            this.rightPanel.checkBoxes.initialize();
            this.rightPanel.priceSlider.initialize();
            this.searchForm.initialize();
            this.sortLinks.initialize();
            this.pagination.initialize();
        },
        rightPanel: {
            checkBoxes: {
                initialize: function(){
                    $(Catalog.$doc).on('click.CatalogNS',Catalog.checkInputs,function(e){
                        Catalog.Controls.rightPanel.checkBoxes.handler(e.target);
                    });
                },
                handler: function(checkBox){
                    if(checkBox.checked){
                        Catalog.Controller.data.pushVal(checkBox.name,checkBox.value,'checkbox');
                    }else{
                        Catalog.Controller.data.rmVal(checkBox.name,checkBox.value,'checkbox');
                    }
                }
            },
            priceSlider: {
                initialize: function(){
                    Catalog.Controls.rightPanel.priceSlider.$slider = $(Catalog.priceInput);
                    Catalog.Controls.rightPanel.priceSlider.$slider.ionRangeSlider({
                        type: 'double'
                        ,min: cGlobals.min
                        ,max: cGlobals.max
                        ,step: 10
                        ,postfix: ' руб.'
                        ,onFinish: function(slider){
                            var locPrice = slider.fromNumber + '|' + slider.toNumber;
                            Catalog.Controller.data.pushVal('price',locPrice);
                            Catalog.priceChanged = true;
                        }
                    });
                    $(Catalog.$doc).on('click.CatalogNS',Catalog.priceReset,function(e){
                        e.preventDefault();
                        if(Catalog.priceChanged == true){
                            Catalog.Controls.rightPanel.priceSlider.handler('reset');
                        }
                    });
                },
                handler: function(action,el){
                    el = el || false;
                    switch (action){
                        case 'reset':
                            Catalog.Controller.data.rmVal('price');
                            Catalog.Controls.rightPanel.priceSlider.$slider.ionRangeSlider('update',{
                                from: cGlobals.min
                                ,to: cGlobals.max
                            });
                            Catalog.priceChanged = false;
                            break;
                    }
                }
            },
            scan: function(){
                return $(Catalog.filtersForm).serializeArray();
            }
        },
        searchForm: {
            initialize: function(){
                Catalog.$doc.on('submit.CatalogNS',Catalog.searchForm,function(e){
                    e.preventDefault();
                    Catalog.Controls.searchForm.handler('search');
                });
                Catalog.$doc.on('click.CatalogNS',Catalog.searchResetButton, function(e){
                    e.preventDefault();
                    Catalog.Controls.searchForm.handler('reset');
                });
            },
            handler: function(action){
                action = action || '';
                switch (action){
                    case 'search':
                        var phrase = $(Catalog.searchInput).val();
                        Catalog.Controller.data.pushVal('search',phrase);
                        break;
                    case 'reset':
                        $(Catalog.searchInput).val('');
                        Catalog.Controller.data.rmVal('search');
                        break;
                }
            },
            scan: function(){
                return $(Catalog.searchForm).serializeArray();
            }
        },
        sortLinks: {
            initialize: function(){
                Catalog.$doc.on('click.CatalogNS',Catalog.sortingLinks,function(e){
                    e.preventDefault();
                    Catalog.Controls.sortLinks.handler(e.target);
                });
            },
            handler: function(link){
                var $link = $(link),
                    sortby = $link.data('sortby');
                Catalog.Controller.data.pushVal('sortby',sortby);
            }
        },
        pagination: {
            initialize: function(){
                Catalog.$doc.on('click.CatalogNS',Catalog.paginationLink,function(e){
                    e.preventDefault();
                    Catalog.Controls.pagination.handler(e.target);
                });
            },
            handler: function(link){
                var $li = $(link).closest('li'),
                    page = $li.data('page') || false;

                if(page){
                    if(!page || page == '1'){
                        Catalog.Controller.data.rmVal('page');
                    }else{
                        Catalog.Controller.data.pushVal('page',page);
                    }

                }
            }
        }
    };

    // Запуск всего этого после загрузки документа
    $(function(){
        Catalog.initialize();
    });

})(window, document, jQuery);