improved top bar for small devices

script/views/topNavBar.js

@@ -1,18 +1,20 @@
 define(['m', '_', 'util'], function (m, _, util) {
+
     var topNavBar = {};
 
-    topNavBar._urlMapping = {
-        '': 'Accueil',
-        nouvelles: 'Nouvelles',
-        calendrier: 'Calendrier',
-        reglement: 'Règlement',
-        // photos: 'Photos',
-        membre: 'Membre',
-        contact: 'Nous Joindre'
-    };
+    topNavBar._urlMapping = [
+        {name: 'Accueil', path: '', fa: 'fa-home'},
+        {name: 'Nouvelles', path: 'nouvelles', fa: 'fa-newspaper-o'},
+        {name: 'Calendrier', path: 'calendrier', fa: 'fa-calendar'},
+        {name: 'Règlement', path: 'reglement', fa: 'fa-legal'},
+        {name: 'Membre', path: 'membre', fa: 'fa-lock'},
+        {name: 'Nous Joindre', path: 'contact', fa: 'fa-phone'}
+    ];
 
     topNavBar.controller = function(){
-        return {id: m.route.param("page")};
+        var model = {};
+        model.openDropdown = false;
+        return model;
     };
 
     topNavBar._getUrlForId = function(id_){
@@ -22,21 +24,102 @@ define(['m', '_', 'util'], function (m, _, util) {
     topNavBar._isActive = function(id_){
         return topNavBar._getUrlForId(id_) == window.location.hash;
     };
-
-    topNavBar._getItem = function(name, id){
-        var class_ = topNavBar._isActive(id) ? 'uk-active' : 'uk-parent';
-        var url = topNavBar._getUrlForId(id);
-        return m("li", {class: class_}, [m("a",{href: url},  name)]);
+    topNavBar._getItemIcon = function(item){
+        return m('i.fa.' + item.fa);
     };
 
-    topNavBar.view = function(controller){
-        return  m("nav.uk-navbar.uk-navbar-attached",[
-                        m("ul.uk-navbar-nav.uk-navbar-center.uk-visible-large",
-                            m('li.uk-parent', m('div.uk-navbar-brand', util.facebookLink())),
-                            _.map(topNavBar._urlMapping, topNavBar._getItem)),
-                        m("ul.uk-navbar-nav.uk-hidden-large",
-                            m('li.uk-parent', util.facebookLink()),
-                            _.map(topNavBar._urlMapping, topNavBar._getItem)),
+    topNavBar._getLargeItem = function(item){
+        var class_ = topNavBar._isActive(item.path) ? 'uk-active' : '';
+        var url = topNavBar._getUrlForId(item.path);
+        return  m("li", {class: class_},
+                    m("a.uk-navbar-nav-subtitle", {href: url},
+                        topNavBar._getItemIcon(item),
+                        m('div', 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_},
+                    topNavBar._getItemIcon(item), ' ',
+                    m("a", {href: url},
+                        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', util.facebookLink()),
+            _.map(topNavBar._urlMapping, topNavBar._getMediumItem)
+        ];
+    };
+
+    topNavBar.dropdown = function(){
+        return  m('div.uk-dropdown.uk-dropdown-navbar.uk-dropdown-bottom',
+                    m('ul.uk-nav.uk-nav-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', util.facebookLink()),
+            m('li.uk-parent', attrs, m('a', m('i.fa.fa-bars')), 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)),
         ]);
     };