app/js/navbar.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
(function(){ 'use strict'; var app = window.LS || (window.LS = {}); var u = app.utils; app.navlinks = { controller: function(){ app.navlinks.vm.init(); }, vm: { init: function(){ this.info = Info.get(); this.activelink = function(url){ return (m.route().match(new RegExp("^\/"+url))) ? "active" : ""; }; this.guidelinks = [ {path: "/guide/overview", title: "Overview"}, {path: "/guide/getting-started", title: "Getting Started"}, {path: "/guide/usage", title: "Usage"}, {path: "/guide/api", title: "API"}, {path: "/guide/credits", title: "Credits"} ]; this.taglinks = function(info){ return info.tags.map(function(tag){ var key = Object.keys(tag)[0]; return {path: "/tags/"+key, title: key+" ("+tag[key]+")"}; }); }; } }, view: function(ctrl){ var vm = app.navlinks.vm; return m("ul.nav.navbar-nav", [ m("li", {class: vm.activelink("info")}, [m("a", {href: "/info", config: m.route}, "Info")]), u.dropdown({title: "Tags", links: vm.taglinks(vm.info()), active: vm.activelink("tags")}), u.dropdown({title: "Guide", links: vm.guidelinks, active: vm.activelink("guide")}) ]); } }; app.navheader = { controller: function() {}, view: function(ctrl) { return m(".navbar-header", [ m("button.navbar-toggle.collapsed[data-toggle='collapse'][data-target='#nav-collapse'][type='button']", [ m("span.sr-only", "Toggle navigation"), m("span.icon-bar"), m("span.icon-bar"), m("span.icon-bar") ]), m("a.navbar-brand", {href: "/", config:m.route}, "LiteStore") ]); } }; app.searchbox = { controller: function() {}, view: function(ctrl) { return m("form.navbar-form.navbar-right[role='search']", [ m(".input-group", [ m("input.form-control[type='text'i][placeholder='Search...']"), m("span.input-group-btn", m("button.btn.btn-default[type='button']", [m("i.fa.fa-search")])) ]) ] ); } }; app.navbar = { controller: function() { this.navheader = new app.navheader.controller(); this.navlinks = new app.navlinks.controller(); this.searchbox = new app.searchbox.controller(); }, view: function(ctrl) { return m("nav.navbar.navbar-inverse.navbar-fixed-top", [ m(".container-fluid", [ app.navheader.view(ctrl.navheader), m("#nav-collapse.collapse.navbar-collapse", [ app.navlinks.view(ctrl.navlinks), app.searchbox.view(ctrl.searchbox) ]) ]) ]); } }; }()); |