Difference between revisions of "MediaWiki:Menu.rythm"
Jump to navigation
Jump to search
(16 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
* {{Link|target=MediaWiki:Form.rythm}} | * {{Link|target=MediaWiki:Form.rythm}} | ||
* https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp | * 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 source = | ||
<source lang='java'> | <source lang='java'> | ||
@// Rythm template for Bootstrap menu | @// Rythm template for Bootstrap menu | ||
− | @// | + | @// static code |
@def static { | @def static { | ||
// a menu | // a menu | ||
− | class Menu { | + | class Menu extends MenuItem { |
String homeUrl_en; | String homeUrl_en; | ||
String homeUrl_de; | String homeUrl_de; | ||
String iconUrl; | String iconUrl; | ||
− | |||
public Menu(String homeUrl_en,String homeUrl_de,String iconUrl) { | public Menu(String homeUrl_en,String homeUrl_de,String iconUrl) { | ||
Line 21: | Line 22: | ||
this.iconUrl=iconUrl; | 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) { | public void addMenuItems(MenuItem[] menuItems) { | ||
Line 40: | Line 66: | ||
return menuItemMap.values(); | return menuItemMap.values(); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
} | } | ||
+ | @// show the given menu - potentially in german | ||
@def showMenu(boolean de,Menu menu) { | @def showMenu(boolean de,Menu menu) { | ||
<nav class="navbar"> | <nav class="navbar"> | ||
Line 69: | Line 81: | ||
<img src='@(menu.iconUrl)' style="max-height:7vh; margin-top: -2vh;" > | <img src='@(menu.iconUrl)' style="max-height:7vh; margin-top: -2vh;" > | ||
</a> | </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> | ||
</div> | </div> | ||
− | </nav> | + | </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> | ||
} | } | ||
</source> | </source> | ||
[[Category:RythmTemplate]] | [[Category:RythmTemplate]] |
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>
}