Refactorized project navigation menus.

app/coffee/app.coffee

@@ -94,6 +94,7 @@ modules = [
     "taigaIssues",
     "taigaSearch",
     "taigaAdmin",
+    "taigaNavMenu",
     "taigaLightboxes",
 
     # Vendor modules

app/coffee/modules/base.coffee

@@ -25,137 +25,19 @@ bindOnce = @.taiga.bindOnce
 
 module = angular.module("taigaBase", ["taigaLocales"])
 
-
 #############################################################################
-## Global Page Controller
+## Main Directive
 #############################################################################
 
-class MainTaigaController extends taiga.Controller
+TaigaMainDirective = ($rootscope, $window) ->
-    @.$inject = ["$scope", "$tgResources"]
+    link = ($scope, $el, $attrs) ->
+        console.log "MAIN KAKA"
+        $window.onresize = () ->
+            $rootscope.$broadcast("resize")
 
-    constructor: (@scope, @rs) ->
+    return {link:link}
-        promise = @.loadInitialData()
-        promise.then null, ->
-            console.log "FAIL"
-            # TODO
-
-    loadInitialData: ->
-        return @rs.projects.list().then (projects) =>
-            @scope.projects = projects
-            return projects
-
-#############################################################################
-## Global Page Directive
-#############################################################################
-
-MainTaigaDirective = ($log, $compile, $rootscope) ->
-    template = _.template("""
-    <h1 class="logo">
-        <a href="" title="Home">
-            <img src="/images/logo.png" alt="Taiga"/>
-        </a>
-    </h1>
-    <ul class="main-nav">
-        <li id="nav-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 id="nav-backlog" tg-nav="project-backlog:project=project.slug">
-            <a href="" title="Backlog" tg-nav="project-backlog:project=project.slug">
-                <span class="icon icon-backlog"></span>
-                <span class="item">Backlog</span>
-            </a>
-        </li>
-        <li id="nav-kanban">
-            <a href="" title="Kanban">
-                <span class="icon icon-kanban"></span><span class="item">Kanban</span></a></li>
-        <li id="nav-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 id="nav-wiki">
-            <a href="" title="Wiki">
-                <span class="icon icon-wiki"></span>
-                <span class="item">Wiki</span>
-            </a>
-        </li>
-        <li id="nav-video">
-            <a href="" title="Video">
-                <span class="icon icon-video"></span>
-                <span class="item">Video</span>
-            </a>
-        </li>
-        <li id="nav-admin">
-            <a href="" tg-nav="project-admin-home:project=project.slug" title="Admin">
-                <span class="icon icon-settings"></span>
-                <span class="item">Admin</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>
-    """)
-
-    # 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.
-    renderMainMenu = ($el, targetScope) ->
-        container = $el.find(".master > .wrapper")
-        menuDom = $el.find("nav.menu")
-
-        if menuDom.hasClass("hidden")
-            menuDom.removeClass("hidden")
-
-        dom = $compile(template({}))(targetScope)
-        menuDom.empty()
-        menuDom.append(dom)
-
-        sectionName = targetScope.section
-        menuDom.find("a.active").removeClass("active")
-        menuDom.find("#nav-#{sectionName} > a").addClass("active")
-
-    # Link function related to projects navigation
-    # part of main menu.
-    linkProjecsNav = ($scope, $el, $attrs, $ctrl) ->
-        $el.on "click", ".menu .logo > a", (event) ->
-            event.preventDefault()
-            $el.toggleClass("open-project-nav")
-
-        $el.on "click", ".projects-list > li > a", (event) ->
-            $el.toggleClass("open-project-nav")
-
-    linkMenuNav = ($scope, $el, $attrs, $ctrl) ->
-        $scope.$on "$viewContentLoaded", (ctx) ->
-            if ctx.targetScope.$$childHead is null
-                $log.error "No scope found for render menu."
-            else
-                renderMainMenu($el, ctx.targetScope.$$childHead)
-
-    link = ($scope, $el, $attrs, $ctrl) ->
-        linkProjecsNav($scope, $el, $attrs, $ctrl)
-        linkMenuNav($scope, $el, $attrs, $ctrl)
-
-    window.onresize = () ->
-        $rootscope.$broadcast("resize")
-
-    return {
-        controller: MainTaigaController
-        link: link
-    }
-
-
-module.directive("tgMain", ["$log", "$compile", "$rootScope", MainTaigaDirective])
 
+module.directive("tgMain", ["$rootScope", "$window", TaigaMainDirective])
 
 #############################################################################
 ## Navigation

app/coffee/modules/nav.coffee

@@ -0,0 +1,167 @@
+###
+# Copyright (C) 2014 Andrey Antukh <niwi@niwi.be>
+# Copyright (C) 2014 Jesús Espino Garcia <jespinog@gmail.com>
+# Copyright (C) 2014 David Barragán Merino <bameda@dbarragan.com>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <http://www.gnu.org/licenses/>.
+#
+# File: modules/nav.coffee
+###
+
+taiga = @.taiga
+groupBy = @.taiga.groupBy
+bindOnce = @.taiga.bindOnce
+
+module = angular.module("taigaNavMenu", [])
+
+#############################################################################
+## Projects Navigation
+#############################################################################
+
+class ProjectsNavigationController extends taiga.Controller
+    @.$inject = ["$scope", "$tgResources"]
+
+    constructor: (@scope, @rs) ->
+        promise = @.loadInitialData()
+        promise.then null, ->
+            console.log "FAIL"
+            # TODO
+
+    loadInitialData: ->
+        return @rs.projects.list().then (projects) =>
+            @scope.projects = projects
+            return projects
+
+
+ProjectsNavigationDirective = ->
+    link = ($scope, $el, $attrs, $ctrl) ->
+        console.log "PROJECTS NAV"
+
+
+    return {
+        link: link
+        controller: ProjectsNavigationController
+    }
+
+
+module.directive("tgProjectsNav", ProjectsNavigationDirective)
+
+
+#############################################################################
+## Project
+#############################################################################
+
+ProjectMenuDirective = ($log, $compile, $rootscope) ->
+    menuEntriesTemplate = _.template("""
+    <ul class="main-nav">
+    <li id="nav-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 id="nav-backlog" tg-nav="project-backlog:project=project.slug">
+        <a href="" title="Backlog" tg-nav="project-backlog:project=project.slug">
+            <span class="icon icon-backlog"></span>
+            <span class="item">Backlog</span>
+        </a>
+    </li>
+    <li id="nav-kanban">
+        <a href="" title="Kanban">
+            <span class="icon icon-kanban"></span><span class="item">Kanban</span>
+        </a>
+    </li>
+    <li id="nav-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 id="nav-wiki">
+        <a href="" title="Wiki">
+            <span class="icon icon-wiki"></span>
+            <span class="item">Wiki</span>
+        </a>
+    </li>
+    <li id="nav-video">
+        <a href="" title="Video">
+            <span class="icon icon-video"></span>
+            <span class="item">Video</span>
+        </a>
+    </li>
+    <li id="nav-admin">
+        <a href="" tg-nav="project-admin-home:project=project.slug" title="Admin">
+            <span class="icon icon-settings"></span>
+            <span class="item">Admin</span>
+        </a>
+    </li>
+    </ul>
+    """)
+
+    mainTemplate = _.template("""
+    <h1 class="logo">
+        <a href="" title="Home">
+            <img src="/images/logo.png" alt="Taiga"/>
+        </a>
+    </h1>
+    <ul class="main-nav"></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>
+    """)
+
+    renderMainMenu = ($el) ->
+        html = mainTemplate({})
+        $el.html(html)
+
+    # 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.
+    renderMenuEntries = ($el, targetScope) ->
+        container = $el.find("ul.main-nav")
+        sectionName = targetScope.section
+
+        dom = $compile(menuEntriesTemplate({}))(targetScope)
+        dom.find("a.active").removeClass("active")
+        dom.find("#nav-#{sectionName} > a").addClass("active")
+
+        container.replaceWith(dom)
+
+
+    link = ($scope, $el, $attrs, $ctrl) ->
+        renderMainMenu($el)
+
+        $scope.$on "$viewContentLoaded", (ctx) ->
+            if ctx.targetScope.$$childHead is null
+                $log.error "No scope found for render menu."
+                return
+
+            if $el.hasClass("hidden")
+                $el.removeClass("hidden")
+
+            renderMenuEntries($el, ctx.targetScope.$$childHead)
+
+    return {link: link}
+
+
+module.directive("tgProjectMenu", ["$log", "$compile", "$rootScope", ProjectMenuDirective])
+
+

app/index.jade

@@ -10,10 +10,10 @@ html(lang="en", ng-app="taiga")
         link(rel="stylesheet", href="/styles/main.css")
 
     body(tg-main)
-        include partials/views/modules/project-nav
+        include partials/views/modules/projects-nav
 
         //- the content of nav.menu is in coffe.modules.base TaigaMain directive
-        nav.menu.hidden
+        nav.menu.hidden(tg-project-menu)
 
         include partials/views/components/notification-message
 

app/partials/layout.jade

@@ -9,7 +9,7 @@ html(lang="en")
       link(rel="stylesheet", href="/styles/main.css")
       block head
   body
-      include views/modules/project-nav
+      include views/modules/projects-nav
       include views/modules/nav
 
       div.master

app/partials/views/modules/projects-nav.jade

@@ -1,4 +1,4 @@
-nav.project-nav
+nav.projects-nav(tg-projects-nav)
     h1 Your projects
     form
         fieldset

app/styles/layout/base.scss

@@ -11,11 +11,11 @@ body {
     -webkit-font-smoothing: antialiased; // Fix for webkit renderin
     height: 100%;
     min-height: 100%;
-    overflow-x: hidden; // open-project-nav
+    overflow-x: hidden; // open-projects-nav
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     width: 100%;
-    .project-nav {
+    .projects-nav {
         @include transform(translate3d(-300px, 0, 0));
         @include transition (transform 1s ease);
     }
@@ -30,8 +30,8 @@ body {
         @include transform(translate3d(0, 0, 0));
         @include transition (transform 1s ease);
     }
-    &.open-project-nav {
+    &.open-projects-nav {
-        .project-nav {
+        .projects-nav {
             @include transform(translate3d(0, 0, 0));
             @include transition (transform 1s ease);
         }

app/styles/main.scss

@@ -36,7 +36,7 @@ $prefix-for-spec:      true;
 
 //Modules
 @import 'modules/nav';
-@import 'modules/project-nav';
+@import 'modules/projects-nav';
 @import 'modules/sprints';
 @import 'modules/burndown';
 @import 'modules/backlog-table';

app/styles/modules/projects-nav.scss

@@ -1,4 +1,4 @@
-.project-nav {
+.projects-nav {
     @include transform(translate3d(-300px, 0, 0));
     background-color: #232323;
     height: 100%;