Club Drupal

(function($){

  //variable for storing the menu count when no ID is present

  var menuCount = 0;

  //plugin code

  $.fn.mobileMenu = function(options){

    //plugin's default options

    var settings = {

      switchWidth: 750,

      topOptionText: 'Select menu item',

      indentString: '   '

    };

    //function to check if selector matches a list

    function isList($this){

      return $this.is('ul, ol');

    }

    //function to decide if mobile or not

    function isMobile(){

      return ($(window).width() < settings.switchWidth);

    }

    //check if dropdown exists for the current element

    function menuExists($this){

      //if the list has an ID, use it to give the menu an ID

      if($this.attr('id')){

        return ($('#mobileMenu_'+$this.attr('id')).length > 0);

      } 

      //otherwise, give the list and select elements a generated ID

      else {

        menuCount++;

        $this.attr('id', 'mm'+menuCount);

        return ($('#mobileMenu_mm'+menuCount).length > 0);

      }

    }

    //change page on mobile menu selection

    function goToPage($this){

      if($this.val() !== null){document.location.href = $this.val()}

    }

    //show the mobile menu

    function showMenu($this){

      $this.css('display', 'none');

      $('#mobileMenu_'+$this.attr('id')).show();

    }

    //hide the mobile menu

    function hideMenu($this){

      $this.css('display', '');

      $('#mobileMenu_'+$this.attr('id')).hide();

    }

    //create the mobile menu

    function createMenu($this){

      if(isList($this)){

        //generate select element as a string to append via jQuery

        var selectString = '<select id="mobileMenu_'+$this.attr('id')+'" class="mobileMenu">';

        //create first option (no value)

        selectString += '<option value="">'+settings.topOptionText+'</option>';

        //loop through list items

        $this.find('li').each(function(){

          //when sub-item, indent

          var levelStr = '';

          var len = $(this).parents('ul, ol').length;

          for(i=1;i<len;i++){levelStr += settings.indentString;}

          //get url and text for option

          var link = $(this).find('a:first-child').attr('href');

          var text = levelStr + $(this).clone().children('ul, ol').remove().end().text();

          //add option

          selectString += '<option value="'+link+'">'+text+'</option>';

        });

        selectString += '</select>';

        //append select element to ul/ol's container

        $this.parent().append(selectString);

        //add change event handler for mobile menu

        $('#mobileMenu_'+$this.attr('id')).change(function(){

          goToPage($(this));

        });

        //hide current menu, show mobile menu

        showMenu($this);

      } else {

        alert('mobileMenu will only work with UL or OL elements!');

      }

    }

    //plugin functionality

    function run($this){

      //menu doesn't exist

      if(isMobile() && !menuExists($this)){

        createMenu($this);

      }

      //menu already exists

      else if(isMobile() && menuExists($this)){

        showMenu($this);

      }

      //not mobile browser

      else if(!isMobile() && menuExists($this)){

        hideMenu($this);

      }

    }

    //run plugin on each matched ul/ol

    //maintain chainability by returning "this"

    return this.each(function() {

      //override the default settings if user provides some

      if(options){$.extend(settings, options);}

      //cache "this"

      var $this = $(this);

      //bind event to browser resize

      $(window).resize(function(){run($this);});

      //run plugin

      run($this);

    });

  };

})(jQuery);