MediaWiki:Menu.rythm

Links

• MediaWiki:Bootstrap.rythm
• MediaWiki:Form.rythm
• https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
• https://getbootstrap.com/docs/3.3/components/#navbar
• https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click

Rythm template source

@// Rythm template for Bootstrap menu
@// static code
@def static {
 // a menu
 class Menu extends MenuItem {
    String homeUrl_en;
    String homeUrl_de;
    String iconUrl;

    public Menu(String homeUrl_en,String homeUrl_de,String iconUrl) {
       this.homeUrl_en=homeUrl_en;
       this.homeUrl_de=homeUrl_de;
       this.iconUrl=iconUrl;
    }
 }

  class MenuItem {
     String id;
     String text_de;
     String text_en;
     String url_en;
     String url_de;

     Map<String,MenuItem> menuItemMap=new LinkedHashMap<String,MenuItem>();

     public MenuItem(){
       this.id="root";
     }

     /**
      * construct me from the given id texts and urls
      */ 
     public MenuItem(String id,String text_en,String url_en, String text_de,String url_de) {
       this.id=id;
       this.text_en=text_en;
       this.text_de=text_de;
       this.url_en=url_en;
       this.url_de=url_de;
     }

    public void addMenuItems(MenuItem[] menuItems) {
      for (MenuItem menuItem:menuItems) {
        addMenuItem(menuItem);
      }
    }

    public void addMenuItem(MenuItem menuItem) {
      menuItemMap.put(menuItem.id,menuItem);
    }
   
    public MenuItem getMenuItem(String menuItemId) {
      MenuItem menuItem=menuItemMap.get(menuItemId);
      return menuItem;
    }

    public Collection<MenuItem> getMenuItems() {
       return menuItemMap.values();
    }
  }
}
@// show the given menu - potentially in german
@def showMenu(boolean de,Menu menu) {
<nav class="navbar">
  <div class="container">  
    <div class="navbar-header">
      <button type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     <a class="navbar-brand"  href='@(de?menu.homeUrl_de:menu.homeUrl_en)'>
       <img src='@(menu.iconUrl)' style="max-height:7vh; margin-top: -2vh;" >
     </a>
    </div>
    <div>
      <ul class="nav navbar-nav">
@for (MenuItem menuItem:menu.getMenuItems()) {
  @{
    Collection<MenuItem> subMenuItems=menuItem.getMenuItems();
  }
  @if(subMenuItems.size()==0) {
  <li><a class="btn btn-secondary" role="button" href="@(de?menuItem.url_de:menuItem.url_en)">@(de?menuItem.text_de:menuItem.text_en)</a>
  } else {
  <li class="dropdown"><a class="btn btn-secondary dropdown-toggle" role="button" data-toggle="dropdown" href="@(de?menuItem.url_de:menuItem.url_en)">@(de?menuItem.text_de:menuItem.text_en)</a>
      <ul class="dropdown-menu">
        @for (MenuItem subMenuItem:subMenuItems) {
        <li><a class="dropdown-item" href="@(de?subMenuItem.url_de:subMenuItem.url_en)">@(de?subMenuItem.text_de:subMenuItem.text_en)</a></li>
        }
      </ul>
 }
    </li>
}
      </ul>
    </div>
  </div>
</nav>
<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );

       $('.dropdown-toggle').click(
            function(){
              if ($(this).next().is(':visible')) {
                location.href = $(this).attr('href');;
               }
            });

    });
</script>
}