Fixing main navigation.

app/coffee/modules/base.coffee

@@ -39,7 +39,60 @@ class MainTaigaController extends taiga.Controller
         @scope.mainSection = name
 
 
-MainTaigaDirective = ($log) ->
+MainTaigaDirective = ($log, $compile) ->
+    template = _.template("""
+    <h1 class="logo"><a href="" title="Home"><img src="/images/logo.png" alt="Taiga"/></a></h1>
+    <ul class="main-nav">
+        <li data-name="search">
+            <a href="" title="Search" tg-nav="project-search:project=project.slug">
+                <span class="icon icon-search"></span><span class="item">Search</span>
+            </a>
+        </li>
+        <li data-name="backlog" tg-nav="project-backlog:project=project.slug">
+            <a href="" title="Backlog" class="active">
+                <span class="icon icon-backlog"></span>
+                <span class="item">Backlog</span>
+            </a>
+        </li>
+        <li data-name="kanban">
+            <a href="" title="Kanban">
+                <span class="icon icon-kanban"></span><span class="item">Kanban</span></a></li>
+        <li data-name="issues">
+            <a href="" title="Issues" tg-nav="project-issues:project=project.slug">
+                <span class="icon icon-issues"></span><span class="item">Issues</span></a></li>
+        <li data-name="wiki">
+            <a href="" title="Wiki">
+                <span class="icon icon-wiki"></span>
+                <span class="item">Wiki</span>
+            </a>
+        </li>
+        <li data-name="video">
+            <a href="" title="Video">
+                <span class="icon icon-video"></span>
+                <span class="item">Video</span>
+            </a>
+        </li>
+    </ul>
+    <div class="user">
+        <div class="user-settings">
+            <ul class="popover">
+                <li><a href="" title="Change profile photo">Change profile photo</a></li>
+                <li><a href="" title="Account settings">Account settings</a></li>
+                <li><a href="" title="Logout">Logout</a></li>
+            </ul>
+            <a href="" title="User preferences" class="avatar">
+                <img src="http://thecodeplayer.com/u/uifaces/12.jpg" alt="username"/>
+            </a>
+        </div>
+    </div>
+    <div class="settings">
+        <a href="" title="User preferences">Pilar</a>
+        <a href="" title="Site preferences">
+            <span class="icon icon-settings"></span>
+        </a>
+    </div>""")
+
+
     linkMainNav = ($scope, $el, $attrs, $ctrl) ->
         menuEntriesSelector = $el.find("ul.main-nav > li")
         menuEntries = _.map(menuEntriesSelector, (x) -> angular.element(x))
@@ -47,7 +100,6 @@ MainTaigaDirective = ($log) ->
 
         $scope.$watch "mainSection", (sectionName) ->
             $el.find("ul.main-nav a.active").removeClass("active")
-
             entry = menuEntriesByName[sectionName]
             entry.find("> a").addClass("active")
 
@@ -55,6 +107,19 @@ MainTaigaDirective = ($log) ->
         $log.debug "Taiga main directive initialized."
         linkMainNav($scope, $el, $attrs, $ctrl)
 
+        # WARNING: this code has traces of slighty hacky parts
+        # This rerenders and compiles the navigation when ng-view
+        # content loaded signal is raised using inner scope.
+        $scope.$on "$viewContentLoaded", ->
+            body = angular.element("body")
+            wScope = body.find(".wrapper").scope()
+            html = template({})
+            dom = $compile(html)(wScope)
+
+            menuDom = $el.find("nav.menu")
+            menuDom.empty()
+            menuDom.append(dom)
+
     return {
         controller: MainTaigaController
         link: link
@@ -71,7 +136,7 @@ SectionMarkerDirective = ($log) ->
     }
 
 
-module.directive("tgMain", ["$log", MainTaigaDirective])
+module.directive("tgMain", ["$log", "$compile", MainTaigaDirective])
 module.directive("tgSectionMarker", ["$log", SectionMarkerDirective])
 
 

app/coffee/modules/base/navurls.coffee

@@ -24,26 +24,6 @@ taiga = @.taiga
 trim = @.taiga.trim
 bindOnce = @.taiga.bindOnce
 
-parseNav = (data, scope) ->
-    options = {}
-
-    [name, params] = _.map(data.split(":"), trim)
-    params = _.map(params.split(","), trim)
-
-    for item in params
-        [key, value] = _.map(item.split("="), trim)
-        options[key] = scope.$eval(value)
-
-    return [name, options]
-
-
-formatUrl = (url, ctx={}) ->
-    replacer = (match) ->
-        match = trim(match, ":")
-        return ctx[match] or "undefined"
-    return url.replace(/(:\w+)/g, replacer)
-
-
 class NavigationUrlsService extends taiga.Service
     constructor: ->
         @.urls = {}
@@ -59,27 +39,43 @@ NavigationUrlsDirective = ($navurls, $auth, $q) ->
     # Example:
     # link(tg-nav="project-backlog:project='sss',")
 
+    # bindOnce version that uses $q for offer
+    # promise based api
+    bindOnceP = ($scope, attr) ->
+        defered = $q.defer()
+        bindOnce $scope, attr, (v) ->
+            defered.resolve(v)
+        return defered.promise
 
-    # TODO: almost all menu entries requires project
-    # model available in scope, but project is only
-    # eventually available on child scopes
-    # TODO: this need an other aproximation :(((
+    parseNav = (data, $scope) ->
+        [name, params] = _.map(data.split(":"), trim)
+        params = _.map(params.split(","), trim)
+        values = _.map(params, (x) -> trim(x.split("=")[1]))
+        promises = _.map(values, (x) -> bindOnceP($scope, x))
 
-    # bindOnceP = ($scope, attr) ->
-    #     defered = $q.defer()
+        return $q.all.apply($q, promises).then ->
+            options = {}
+            for item in params
+                [key, value] = _.map(item.split("="), trim)
+                options[key] = $scope.$eval(value)
+            return [name, options]
+
+    formatUrl = (url, ctx={}) ->
+        replacer = (match) ->
+            match = trim(match, ":")
+            return ctx[match] or "undefined"
+        return url.replace(/(:\w+)/g, replacer)
 
     link = ($scope, $el, $attrs) ->
-        [name, options] = parseNav($attrs.tgNav, $scope)
+        parseNav($attrs.tgNav, $scope).then (result) ->
+            [name, options] = result
 
-        user = $auth.getUser()
-        options.user = user.username if user
+            user = $auth.getUser()
+            options.user = user.username if user
 
-        url = $navurls.resolve(name)
-        fullUrl = formatUrl(url, options)
-
-        console.log url, $attrs.tgNav
-
-        $el.attr("href", fullUrl)
+            url = $navurls.resolve(name)
+            fullUrl = formatUrl(url, options)
+            $el.attr("href", fullUrl)
 
     return {link: link}
 

app/index.jade

@@ -9,8 +9,7 @@ html(lang="en", ng-app="taiga")
         meta(name="viewport", content="width=device-width, user-scalable=no")
         link(rel="stylesheet", href="/styles/main.css")
     body(tg-main)
-        // TODO: move to inner of ng-view
-        include partials/views/modules/nav
+        nav.menu
         include partials/views/components/notification-message
         div.master(ng-view)
         div.hidden.lightbox.lightbox_confirm-delete