responsivewebframework/src/js/dropdown-list.js

Jalasoft Foundation Front End Framework ========================================

/*global jQuery:false*/
(function($) {
    var toggle = '[data-toggle="dropdown-list"]';
    var tagHtmlIcon = '<span class="icon-deploy"></span></button>';

    var DropDownList = function() {
    };

    DropDownList.VERSION = '0.0.1';
    DropDownList.prototype.init = function(){
        var $this = $(this);//element tag select
        var containerWrapperDropdownList = $this.attr('name')+ '-wrapper-dropdown';
        var idDropdownMenu = $this.attr('name') + '-dropdown-menu';
        var textDefaultOption= $this.find('option').eq(0).text();

        var tagHtmlToggle = '<button class="dropdown-list-toggle" data-toggle="dropdown-list">'+
            textDefaultOption + tagHtmlIcon +
            '</button>';
        var listClassDropdownList = 'dropdown-list';
        if($this.attr('disabled')) {
            listClassDropdownList += ' disabled';
        }
        $('<div id= "'+ containerWrapperDropdownList+
        '" class="'+ listClassDropdownList+'">' +
        '</div>').
            insertAfter($this);

        $(tagHtmlToggle).
            appendTo('#'+containerWrapperDropdownList);
        $('<ul id="' + idDropdownMenu + '" class="dropdown-menu jl-scrollbar-inner" />')
            .appendTo('#'+containerWrapperDropdownList);

        for (var i = 1; i < $this.children().length; i++) {
            var $thisOption = $this.find('option').eq(i);
            var text = $thisOption.text();
            $('<li />').text(text).appendTo('#'+ idDropdownMenu);
        }
        if ($this.find('option:selected')) {
            var selectedOption = $this.find('option:selected').index();
            $('#' + idDropdownMenu)
                .find('li')
                .not(':eq(' + selectedOption + ')')
                .addClass('unselected');
        }

        var widthMaxOption = Math.round($('#'+containerWrapperDropdownList + '> .dropdown-menu').width());
        var widthToggle = Math.round($('#'+ containerWrapperDropdownList+ ' > button').width());

        widthMaxOption += 20;
        widthToggle += +20;
        if( widthMaxOption > widthToggle) {
            $('#'+ idDropdownMenu).width(widthMaxOption);
            $('#'+ containerWrapperDropdownList+ ' > button').width(widthMaxOption- 11);
        }
        else {
            $('#'+ idDropdownMenu).width(widthToggle+ 11);
            $('#'+ containerWrapperDropdownList+ ' > button').width(widthToggle);

        }

        $('#' + idDropdownMenu + ' li')
            .click(
            function(){
                var $thisElement = $(this);
                var $parent = $thisElement.parent();
                var newSelect = $thisElement.index()+1;
                var textOption = $thisElement.text() + tagHtmlIcon;

                $('#'+containerWrapperDropdownList).find('button').html(textOption);
                $parent
                    .find('.unselected')
                    .removeClass('unselected');
                $parent
                    .find('li')
                    .not(this)
                    .addClass('unselected');
                $this
                    .find('option:selected')
                    .removeAttr('selected');
                $this
                    .find('option:eq(' + newSelect + ')')
                    .attr('selected',true);
                $('#'+containerWrapperDropdownList).removeClass('open');
                return false;
            });

        return $(this);
    };

    DropDownList.prototype.toggle = function() {
        var $this = $(this);
        var $parent = $this.parent();
        var isActive = $parent.hasClass('open');
        clearMenu($this);
        if(isActive) {
            $parent.addClass('open');
            $parent.find('span').addClass('up');
        }
        if($parent.hasClass('disabled')) {return; }
        $parent.toggleClass('open');
        $parent.find('span').toggleClass('up');
        return false;
    };


    function clearMenu($that) {
        $(toggle).each(function () {
            var $this = $(this);
            var $parent = $this.parent();

            if (!$parent.hasClass('open')) { return; }
            $parent.removeClass('open');
            $parent.find('span').removeClass('up');
        });

    }

    // DROPDOWN LIST PLUGIN DEFINITION
    // ====================
    $.fn.dropdrownList = DropDownList.prototype.init;


    // APPLY TO DROPDOWN LIST ELEMENTS
    // ===================================
    $(document).ready(function () {
        $('select[class="drop-down-list"]').each($.fn.dropdrownList);
        $(document).on('click.fe.dropdown',toggle, DropDownList.prototype.toggle);
        $(document).on('click.fe.dropdown',clearMenu());
    });


})(jQuery);