Difference between revisions of "MediaWiki:Menu.rythm"
Jump to navigation
Jump to search
(3 intermediate revisions by the same user not shown) | |||
Line 89: | Line 89: | ||
} | } | ||
@if(subMenuItems.size()==0) { | @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 { | } 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"> | <ul class="dropdown-menu"> | ||
@for (MenuItem subMenuItem:subMenuItems) { | @for (MenuItem subMenuItem:subMenuItems) { | ||
− | <li><a href="@(de?subMenuItem.url_de:subMenuItem.url_en)">@(de?subMenuItem.text_de:subMenuItem.text_en)</a></li> | + | <li><a class="dropdown-item" href="@(de?subMenuItem.url_de:subMenuItem.url_en)">@(de?subMenuItem.text_de:subMenuItem.text_en)</a></li> |
} | } | ||
</ul> | </ul> | ||
Line 110: | Line 110: | ||
function(){ $(this).removeClass('open') } | function(){ $(this).removeClass('open') } | ||
); | ); | ||
+ | |||
+ | $('.dropdown-toggle').click( | ||
+ | function(){ | ||
+ | if ($(this).next().is(':visible')) { | ||
+ | location.href = $(this).attr('href');; | ||
+ | } | ||
+ | }); | ||
+ | |||
}); | }); | ||
</script> | </script> |
Latest revision as of 19:07, 28 November 2017
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>
}