Filter Menu

gistfile1.js

define(['jquery', 'pkg.utils', 'plugins/widget'], function($, utils) {
    
    $.widget("cbsi.filterMenu", $.cbsi.widget,  {
        
        /*        
        TERMS:
        
        Avtive State - Buttons highlighted, select window open.
        Inactive State - Buttons contain default styles, select window hidden,
        Selected - Item highlighted, event triggered to update feed
        
        ITEMS:
        
            LOAD: Inactive state, feed has default sorting and filtering. Attach click events to buttons and multi-select items
        
            BUTTONS: [click] on a button, [toggle] event triggered
            
        EVENTS:
        
            [click] - jquery click event to trigger all initial finctionality
            
            [toggle] - Checks the state. If inactive, trigger [open] if active, trigger [close]
            
            [open] - Active = true, trigger [changeState] with onComplete callback
            
            [close] - Active = false, triffer [changeState] with onComplete callback
            
            [changeState] - Toggle active class on buttons. Animate select list. Trigger callback when actions are complete
            
            [build URL] - use params from selection(s) to build URL for ajax call
            
            [makeRequest] - Send ajax request to update feed
            
            [handleResponse] - Paint ajax response HTML to container
            
            [handleResponseFailure] - create/display error message
            
        _buildParameters:
        
            Needs: set of filters and a single sort item (a sort is applied by default). 
            
        */
        
        options: {
            url: null,
            data: null,
            active: false,
            animationSpeed: 400,
            buttonSelector: '[data-item="filterBtn"]',
            itemSelector: '[data-item="filterBy"]'
        },
        
        _create: function() {
            // collects data props off element and sets them as options
            this.setOptionsFromData();
            
            var self = this,
                o = self.options;
            
            this.$element = this.element;
            this.active = o.active;
            this.keepActive = false;
            this.activeButton = null;
            this.$buttons = $(o.buttonSelector, this.$element);
            this.parameters = {};

            this.$buttons.on('click.filterMenu', function(e) {
                e.preventDefault();
                e.stopPropagation();
                self.toggle($(this));
            });
            
            $(o.itemSelector).on('click.filterMenu', 'li a', function(e) {
                e.preventDefault();
                e.stopPropagation();
                self.selectToggle($(this), e.delegateTarget);
            });
        },
        
        _getMenu: function($button) {
            var data = $button.data(),
                selector = data.content;
                
            return $('#'+selector);
        },
        
        open: function($button) {
            var self = this,
                $menu = this._getMenu($button);

            $button.addClass('active menu-open');
            $menu.slideDown(this.options.animationSpeed, function() {
                self.active = true;
            });
        },
        
        close: function($button) {
            var self = this,
                $menu = this._getMenu($button);
            
            if(!this.keepActive) { $button.removeClass('active'); }
            
            $button.removeClass('menu-open');
            $menu.slideUp(this.options.animationSpeed, function() {
                self.active = false;
            });
        },
        
        toggle: function($button) {
            var $previous = this.$buttons.filter('.menu-open');
            this.activeButton = $button;
            
            this[ $button.hasClass('menu-open') ? 'close' : 'open' ]($button);
            if ($previous.length) { this.close($previous); }
        },
                
        select: function($item, parentElement) {
            var itemValue = $item.data('value'),
                parentElement = $(parentElement),
            	multiSelect = parentElement.data('multi-select'),
            	lastSelected = parentElement.find('.selected');
                        
            this._buildParameters(itemValue, 'add');

            if(!multiSelect) {
            	if(lastSelected.length !== 0) {
                    this.deselect(lastSelected);
            	}
            }
            
            this.keepActive = true;
            $item.addClass('selected');
            this.close(this.activeButton);
            this._makeRequest();
        },
        
        deselect: function($item) {
            var itemValue = $item.data('value');
            this._buildParameters(itemValue, 'remove');
            if(this.parameters[this.activeButton.data('content')].length < 1) { this.keepActive = false; }
            $item.removeClass('selected');
            this.close(this.activeButton);
            this._makeRequest();
        },
        
        selectToggle: function($item, parentElement) {
            this[ $item.hasClass('selected') ? 'deselect' : 'select' ]($item, parentElement);
        },
        
        _buildParameters: function(itmes, action) {
            var key = this.activeButton.data('content');
            
            if(!this.parameters[key]) {
                this.parameters[key] = [];
            }            
            
            if(action === 'add') {
                this.parameters[key].splice(0, 0, itmes);
            }
            else {
                utils.arrays.removeByValue(this.parameters[key], itmes);
            }
            
            return this.parameters;
        },
        
        _makeRequest: function() {
        
        },
        
        _handelResponse: function() {
        
        },
        
        _handleResponseFailure: function() {
        
        },
        
        destroy: function() {
        
        }
        
    });
    
});