christianmagill
3/15/2016 - 1:31 PM

multiSelect.js


                    /* ========================================================================
                     // Multi Select
                     // ========================================================================*/

                    /* ------------------------------------------------------------------------
                     // Sortable
                     // ------------------------------------------------------------------------*/

                    function multiSelectSortableAfterInit(that, container){
                        container.find('.ms-selection ul').sortable();
                    }

                    /* ------------------------------------------------------------------------
                     // Limiter
                     // ------------------------------------------------------------------------*/

                    function multiSelectLimiterAfterInit(that, container){
                        that.selectLimit = (that.$element.attr('data-select-limit') !== "") ? parseInt(that.$element.attr('data-select-limit')) : -1;
                        that.selectCount = that.$element.find(':selected').length;
                        if(that.$element.data('initialized') !== true && that.selectLimit > -1) {
                            that.$element.data('initialized', true);
                            multiSelectLimiterUpdate(that);
                        }
                    }

                    function multiSelectLimiterAfterSelect(that, values){
                        if(values){
                            that.selectCount += values.length;
                        }
                        multiSelectLimiterUpdate(that);
                    }

                    function multiSelectLimiterAfterDeselect(that, values){
                        if(values){
                            that.selectCount -= values.length;
                        }
                        multiSelectLimiterUpdate(that);
                    }

                    function multiSelectLimiterUpdate(that){

                        var selectedValues = that.$element.val();

                        if(that.selectCount >= that.selectLimit){
                            that.$element.children().each(function(){
                               if(!_.contains(selectedValues, this.value)){
                                   $(this).attr('disabled', 'disabled');
                               }
                            });

                            that.$selectableUl.children().addClass(that.options.disabledClass);

                        }
                        else{
                            that.$element.children().removeAttr('disabled');
                            that.$selectableUl.children().removeClass(that.options.disabledClass);
                        }

                    }

                    /* ------------------------------------------------------------------------
                     // Searchable
                     // ------------------------------------------------------------------------*/
                    function multiSelectSearchableAfterInit(that, container){
                        var $selectableSearch = that.$selectableUl.prev(),
                            $selectionSearch = that.$selectionUl.prev(),
                            selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                            selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

                        that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                            .on('keydown', function(e){
                                if (e.which === 40){
                                    that.$selectableUl.focus();
                                    return false;
                                }
                            });

                        that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                            .on('keydown', function(e){
                                if (e.which == 40){
                                    that.$selectionUl.focus();
                                    return false;
                                }
                            });
                    }

                    function multiSelectSearchableAfterSelect(that, values){
                        that.qs1.cache();
                        that.qs2.cache();
                    }

                    function multiSelectSearchableAfterDeselect(that, values){
                        that.qs1.cache();
                        that.qs2.cache();
                    }

                    /* ------------------------------------------------------------------------
                     // Initialize
                     // ------------------------------------------------------------------------*/

                    $('.searchable').multiSelect({
                        selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Search...'>",
                        selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Search...'>",
                        afterInit: function(container){
                            console.log('after init');
                            multiSelectSortableAfterInit(this, container);  // Call sortable function
                            multiSelectLimiterAfterInit(this, container);
                            multiSelectSearchableAfterInit(this, container);
                        },
                        afterSelect: function(values){
                            console.log('after select');
                            multiSelectLimiterAfterSelect(this, values);
                            multiSelectSearchableAfterSelect(this, values);
                        },
                        afterDeselect: function(values){
                            console.log('after deselect');
                            multiSelectLimiterAfterDeselect(this, values);
                            multiSelectSearchableAfterDeselect(this, values);
                        }
                    });