132 lines
4.5 KiB
JavaScript
132 lines
4.5 KiB
JavaScript
define(['m', '_', 'util'], function (m, _, util) {
|
|
|
|
var topNavBar = {};
|
|
|
|
topNavBar._urlMapping = [
|
|
{name: 'Accueil', path: '', fa: 'fa-home'},
|
|
{name: 'Nouvelles', path: 'nouvelles', fa: 'fa-newspaper-o'},
|
|
{name: 'Calendrier', path: 'calendrier', fa: 'fa-calendar', includeSubPath: true},
|
|
{name: 'Règlement', path: 'reglement', fa: 'fa-legal'},
|
|
{name: 'Membre', path: 'membre', fa: 'fa-lock'},
|
|
// {name: 'Historique', path: 'historique', fa: 'fa-history'},
|
|
{name: 'Nous Joindre', path: 'contact', fa: 'fa-phone'}
|
|
];
|
|
|
|
topNavBar.controller = function(){
|
|
var model = {};
|
|
model.openDropdown = false;
|
|
return model;
|
|
};
|
|
|
|
topNavBar._getUrlForId = function(id_){
|
|
return '#/' + id_;
|
|
};
|
|
|
|
topNavBar._isActive = function(id_, includeSubPath){
|
|
if(includeSubPath){
|
|
return window.location.hash.startsWith(topNavBar._getUrlForId(id_));
|
|
}
|
|
return topNavBar._getUrlForId(id_) == window.location.hash;
|
|
};
|
|
topNavBar._getItemIcon = function(item){
|
|
return m('i.fa.' + item.fa);
|
|
};
|
|
|
|
topNavBar._getLargeItem = function(item){
|
|
var class_ = topNavBar._isActive(item.path, item.includeSubPath) ? 'uk-active' : '';
|
|
var url = topNavBar._getUrlForId(item.path);
|
|
return m("li", {class: class_},
|
|
m("a", {href: url},
|
|
m('div', topNavBar._getItemIcon(item), ' ', item.name)
|
|
)
|
|
);
|
|
};
|
|
|
|
topNavBar._getMediumItem = function(item){
|
|
var class_ = topNavBar._isActive(item.path) ? 'uk-active' : '';
|
|
var url = topNavBar._getUrlForId(item.path);
|
|
return m("li", {class: class_},
|
|
m("a", {href: url},
|
|
topNavBar._getItemIcon(item), ' ', item.name
|
|
)
|
|
);
|
|
};
|
|
|
|
topNavBar._getSmallItem = function(item){
|
|
var class_ = topNavBar._isActive(item.path) ? 'uk-active' : '';
|
|
var url = topNavBar._getUrlForId(item.path);
|
|
return m("li", {class: class_},
|
|
m("a", {href: url},
|
|
topNavBar._getItemIcon(item),
|
|
' ',
|
|
item.name
|
|
)
|
|
);
|
|
};
|
|
|
|
topNavBar.largeTopNav = function(){
|
|
return [
|
|
m('li.uk-parent', m('div.uk-navbar-brand', util.facebookLink())),
|
|
_.map(topNavBar._urlMapping, topNavBar._getLargeItem)
|
|
];
|
|
};
|
|
|
|
topNavBar.mediumTopNav = function(){
|
|
return [
|
|
m('li.uk-parent', m('div.uk-navbar-brand', util.facebookLink())),
|
|
_.map(topNavBar._urlMapping, topNavBar._getMediumItem)
|
|
];
|
|
};
|
|
|
|
topNavBar.dropdown = function(){
|
|
return m('div.uk-dropdown',
|
|
m('ul.uk-nav.uk-nav-navbar.uk-dropdown-navbar',
|
|
_.map(topNavBar._urlMapping, topNavBar._getSmallItem)
|
|
));
|
|
};
|
|
|
|
topNavBar.toggleDropdown = function(model){
|
|
return function(){
|
|
model.openDropdown = !model.openDropdown;
|
|
};
|
|
};
|
|
|
|
topNavBar.clickElsewhere = function(model){
|
|
var style = {
|
|
position: 'fixed',
|
|
top: '0px',
|
|
bottom: '0px',
|
|
left: '0px',
|
|
right: '0px',
|
|
background: 'black',
|
|
opacity: 0.5,
|
|
'z-index': 2
|
|
};
|
|
var attrs = {style: style, onclick: topNavBar.toggleDropdown(model)};
|
|
return m('div', attrs);
|
|
};
|
|
|
|
topNavBar.smallTopNav = function(model){
|
|
var class_ = model.openDropdown ? 'uk-open' : '';
|
|
var attrs = {class: class_, onclick: topNavBar.toggleDropdown(model)};
|
|
var ret = [
|
|
m('li.uk-parent', m('div.uk-navbar-brand', util.facebookLink())),
|
|
m('li.uk-parent[data-uk-dropdown][aria-expanded]', attrs, m('a', m('i.fa.fa-bars'), ' Menu'), topNavBar.dropdown()),
|
|
];
|
|
if(model.openDropdown){
|
|
ret.push(topNavBar.clickElsewhere(model));
|
|
}
|
|
return ret;
|
|
};
|
|
|
|
topNavBar.view = function(model){
|
|
return m("nav.uk-navbar.uk-navbar-attached", [
|
|
m("ul.uk-navbar-nav.uk-visible-large.uk-navbar-content.uk-navbar-center", topNavBar.largeTopNav()),
|
|
m("ul.uk-navbar-nav.uk-visible-medium", topNavBar.mediumTopNav()),
|
|
m("ul.uk-navbar-nav.uk-visible-small", topNavBar.smallTopNav(model)),
|
|
]);
|
|
};
|
|
|
|
return topNavBar;
|
|
});
|