Merge pull request #153 from taigaio/bug/1572/refactor-projects-pagination

fix #1572 - refactor projects pagination

app/coffee/modules/nav.coffee

@@ -71,7 +71,7 @@ class ProjectsNavigationController extends taiga.Controller
 module.controller("ProjectsNavigationController", ProjectsNavigationController)
 
 
-ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $location) ->
+ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $location, $compile) ->
     baseTemplate = _.template("""
     <h1>Your projects</h1>
     <form>
@@ -87,7 +87,7 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
         </a>
     </div>
 
-    <div class="projects-pagination">
+    <div class="projects-pagination" tg-projects-pagination>
         <a class="v-pagination-previous icon icon-arrow-up " href=""></a>
         <div class="v-pagination-list">
             <ul class="projects-list">
@@ -128,19 +128,21 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
 
                 tgLoader.disablePreventLoading()
 
-    renderProjects  = ($el, projects) ->
-        html = projectsTemplate({projects: projects})
-        $el.find(".projects-list").html(html)
-
-    render = ($el, projects) ->
-        html = baseTemplate()
-        $el.html(html)
-        renderProjects($el, projects)
 
     link = ($scope, $el, $attrs, $ctrls) ->
         $ctrl = $ctrls[0]
         $rootscope.$on("project:loaded", hideMenu)
 
+        renderProjects  = (projects) ->
+            html = projectsTemplate({projects: projects})
+            $el.find(".projects-list").html(html)
+
+            $scope.$emit("regenerate:project-pagination")
+
+        render = (projects) ->
+            $el.html($compile(baseTemplate())($scope))
+            renderProjects(projects)
+
         overlay.on 'click', () ->
             hideMenu()
 
@@ -184,10 +186,9 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
 
         $scope.$on "projects:filtered", ->
             renderProjects($el, $scope.filteredProjects)
-            $el.trigger("regenerate:pagination")
 
         $scope.$watch "projects", (projects) ->
-            render($el, projects) if projects?
+            render(projects) if projects?
 
     return {
         require: ["tgProjectsNav"]
@@ -196,8 +197,7 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
     }
 
 
-module.directive("tgProjectsNav", ["$rootScope", "animationFrame", "$timeout", "tgLoader", "$tgLocation",
+module.directive("tgProjectsNav", ["$rootScope", "animationFrame", "$timeout", "tgLoader", "$tgLocation", "$compile", ProjectsNavigationDirective])
-                                   ProjectsNavigationDirective])
 
 
 #############################################################################

app/coffee/modules/projects/main.coffee

@@ -91,6 +91,7 @@ class ProjectController extends taiga.Controller
 
         promise.then () =>
             @appTitle.set(@scope.project.name)
+            @scope.$emit("regenerate:project-pagination")
 
         promise.then null, @.onInitialDataError.bind(@)
 
@@ -123,35 +124,72 @@ module.controller("ProjectController", ProjectController)
 
 ProjectsPaginationDirective = ($timeout) ->
     link = ($scope, $el, $attrs) ->
-        bindOnce $scope, "projects", (projects) ->
+        prevBtn = $el.find(".v-pagination-previous")
-            container = nextBtn = prevBtn = null
+        nextBtn = $el.find(".v-pagination-next")
+        container = $el.find("ul")
+
         pageSize = 0
         containerSize = 0
 
-            renderNextAndPrev  = ->
+        render  = ->
-                if projects.length
             pageSize = $el.find(".v-pagination-list").height()
-                    containerSize = container.height()
+
-                    if containerSize > pageSize
+            if container.find("li").length
+                if hasPagination()
+                    if hasNextPage()
                         visible(nextBtn)
+                    else
+                        hide(nextBtn)
+
+                    if hasPrevPage()
+                        visible(prevBtn)
+                    else
+                        hide(prevBtn)
                 else
                     remove()
             else
                 remove()
 
-            nextPage = (element, pageSize, callback) ->
+        hasPagination = ->
-                top = parseInt(element.css('top'), 10)
+            containerSize = container.height()
+
+            return containerSize > pageSize
+
+        hasPrevPage = (top) ->
+            if !top?
+                top = -parseInt(container.css('top'), 10) || 0
+
+            return top != 0
+
+        hasNextPage = (top) ->
+            containerSize = container.height()
+
+            if !top
+                top = -parseInt(container.css('top'), 10) || 0
+
+            return containerSize > pageSize && top + pageSize < containerSize
+
+        nextPage = (callback) ->
+            top = parseInt(container.css('top'), 10)
             newTop = top - pageSize
 
-                element.animate({"top": newTop}, callback)
+            lastLi = $el.find(".v-pagination-list li:last-child")
+            maxTop = -((lastLi.position().top + lastLi.outerHeight()) - pageSize)
+
+            newTop = maxTop if newTop < maxTop
+
+            container.animate({"top": newTop}, callback)
 
             return newTop
 
-            prevPage = (element, pageSize, callback) ->
+        prevPage = (callback) ->
-                top = parseInt(element.css('top'), 10)
+            top = parseInt(container.css('top'), 10)
+
             newTop = top + pageSize
 
-                element.animate({"top": newTop}, callback)
+            newTop = 0 if newTop > 0
+
+            container.animate({"top": newTop}, callback)
 
             return newTop
 
@@ -161,6 +199,8 @@ ProjectsPaginationDirective = ($timeout) ->
         hide = (element) ->
             element.css('visibility', 'hidden')
 
+        checkButtonVisibility = () ->
+
         remove = () ->
             container.css('top', 0)
             hide(prevBtn)
@@ -174,9 +214,9 @@ ProjectsPaginationDirective = ($timeout) ->
 
             visible(nextBtn)
 
-                newTop = prevPage(container, pageSize)
+            newTop = prevPage()
 
-                if newTop == 0
+            if !hasPrevPage(newTop)
                 hide(prevBtn)
 
         $el.on "click", ".v-pagination-next", (event) ->
@@ -187,27 +227,57 @@ ProjectsPaginationDirective = ($timeout) ->
 
             visible(prevBtn)
 
-                newTop = nextPage(container, pageSize)
+            newTop = -nextPage()
 
-                if -newTop + pageSize > containerSize
+            if !hasNextPage(newTop)
                 hide(nextBtn)
 
-            $el.on "regenerate:pagination", () =>
+        $scope.$on "regenerate:project-pagination", ->
-                renderNextAndPrev()
+            remove()
+            render()
 
-            #wait digest end
+        $(window).on "resize.projects-pagination", render
-            $timeout () =>
-                prevBtn = $el.find(".v-pagination-previous")
-                nextBtn = $el.find(".v-pagination-next")
-                container = $el.find("ul")
 
-                renderNextAndPrev()
+        $scope.$on "$destroy", ->
+            $(window).off "resize.projects-pagination"
 
     return {
-        link: link,
+        link: link
-        scope: {
-            projects: "="
-        }
     }
 
 module.directive("tgProjectsPagination", ['$timeout', ProjectsPaginationDirective])
+
+ProjectsListDirective = ($compile) ->
+    template = _.template("""
+        <div tg-projects-pagination>
+            <div class="projects-pagination">
+                <a class="v-pagination-previous icon icon-arrow-up" href=""></a>
+                <div class="v-pagination-list">
+                    <ul class="projects-list">
+                        <% _.each(projects, function(project) { %>
+                        <li>
+                            <a class="button" href="<%- project.url %>">
+                                <%- project.name %>
+                            </a>
+                        </li>
+                        <% }) %>
+                    </ul>
+                </div>
+                <a class="v-pagination-next icon icon-arrow-bottom" href=""></a>
+            </div>
+        </div>
+    """)
+
+    link = ($scope, $el, $attrs, $ctrls) ->
+        render = (projects) ->
+            $el.html($compile(template({projects: projects}))($scope))
+            $scope.$emit("regenerate:project-pagination")
+
+        $scope.$watch "projects", (projects) ->
+            render(projects) if projects?
+
+    return {
+        link: link
+    }
+
+module.directive("tgProjectsList", ["$compile", ProjectsListDirective])

app/partials/projects.jade

@@ -28,14 +28,7 @@ block content
 
                 div.all-projects
                     h1 Projects
-                    div(tg-projects-pagination, projects="ctrl.projects.all", active="ctrl.projects.all.length")
+                    div(tg-projects-list)
-                        .projects-pagination
-                            a.v-pagination-previous.icon.icon-arrow-up(href="")
-                            .v-pagination-list
-                                ul.projects-list
-                                    li(ng-repeat="project in ctrl.projects.all")
-                                        a.button(tg-bo-bind="project.name", href="{{ project.url }}")
-                            a.v-pagination-next.icon.icon-arrow-bottom(href="")
 
                     .create-project-button-wrapper
                         a.button.button-green(href="", ng-click="ctrl.newProject()") Create project

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

@@ -6,4 +6,4 @@
 div.wizard-create-project(tg-lb-create-project)
     include wizard-create-project
 
-nav.projects-nav(tg-projects-nav, tg-projects-pagination, projects="projects")
+nav.projects-nav(tg-projects-nav)

app/styles/modules/home-projects-list.scss

@@ -68,7 +68,7 @@
         @include transition(background-color .3s linear);
         background-color: rgba($white, .5);
         color: $whitish;
-        height: 121px;
+        height: 130px;
         margin-bottom: 1rem;
         margin-right: 1rem;
         overflow: hidden;
@@ -109,7 +109,7 @@
     display: flex;
     flex-direction: column;
     margin-left: 1rem;
-    max-height: 396px;
+    max-height: 422px;
     padding: 1rem;
     h1 {
         color: $whitish;