diff --git a/app/coffee/modules/nav.coffee b/app/coffee/modules/nav.coffee index c13dc032..66416340 100644 --- a/app/coffee/modules/nav.coffee +++ b/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("""

Your projects

@@ -87,7 +87,7 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $ -
+
    @@ -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", - ProjectsNavigationDirective]) +module.directive("tgProjectsNav", ["$rootScope", "animationFrame", "$timeout", "tgLoader", "$tgLocation", "$compile", ProjectsNavigationDirective]) ############################################################################# diff --git a/app/coffee/modules/projects/main.coffee b/app/coffee/modules/projects/main.coffee index db64d8d2..8fc5658b 100644 --- a/app/coffee/modules/projects/main.coffee +++ b/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,91 +124,160 @@ module.controller("ProjectController", ProjectController) ProjectsPaginationDirective = ($timeout) -> link = ($scope, $el, $attrs) -> - bindOnce $scope, "projects", (projects) -> - container = nextBtn = prevBtn = null - pageSize = 0 - containerSize = 0 + prevBtn = $el.find(".v-pagination-previous") + nextBtn = $el.find(".v-pagination-next") + container = $el.find("ul") - renderNextAndPrev = -> - if projects.length - pageSize = $el.find(".v-pagination-list").height() - containerSize = container.height() - if containerSize > pageSize + pageSize = 0 + containerSize = 0 + + render = -> + pageSize = $el.find(".v-pagination-list").height() + + if container.find("li").length + if hasPagination() + if hasNextPage() visible(nextBtn) else - remove() + hide(nextBtn) + + if hasPrevPage() + visible(prevBtn) + else + hide(prevBtn) else remove() + else + remove() - nextPage = (element, pageSize, callback) -> - top = parseInt(element.css('top'), 10) - newTop = top - pageSize + hasPagination = -> + containerSize = container.height() - element.animate({"top": newTop}, callback) + return containerSize > pageSize - return newTop + hasPrevPage = (top) -> + if !top? + top = -parseInt(container.css('top'), 10) || 0 - prevPage = (element, pageSize, callback) -> - top = parseInt(element.css('top'), 10) - newTop = top + pageSize + return top != 0 - element.animate({"top": newTop}, callback) + hasNextPage = (top) -> + containerSize = container.height() - return newTop + if !top + top = -parseInt(container.css('top'), 10) || 0 - visible = (element) -> - element.css('visibility', 'visible') + return containerSize > pageSize && top + pageSize < containerSize - hide = (element) -> - element.css('visibility', 'hidden') + nextPage = (callback) -> + top = parseInt(container.css('top'), 10) + newTop = top - pageSize - remove = () -> - container.css('top', 0) + 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 = (callback) -> + top = parseInt(container.css('top'), 10) + + newTop = top + pageSize + + newTop = 0 if newTop > 0 + + container.animate({"top": newTop}, callback) + + return newTop + + visible = (element) -> + element.css('visibility', 'visible') + + hide = (element) -> + element.css('visibility', 'hidden') + + checkButtonVisibility = () -> + + remove = () -> + container.css('top', 0) + hide(prevBtn) + hide(nextBtn) + + $el.on "click", ".v-pagination-previous", (event) -> + event.preventDefault() + + if container.is(':animated') + return + + visible(nextBtn) + + newTop = prevPage() + + if !hasPrevPage(newTop) hide(prevBtn) + + $el.on "click", ".v-pagination-next", (event) -> + event.preventDefault() + + if container.is(':animated') + return + + visible(prevBtn) + + newTop = -nextPage() + + if !hasNextPage(newTop) hide(nextBtn) - $el.on "click", ".v-pagination-previous", (event) -> - event.preventDefault() + $scope.$on "regenerate:project-pagination", -> + remove() + render() - if container.is(':animated') - return + $(window).on "resize.projects-pagination", render - visible(nextBtn) - - newTop = prevPage(container, pageSize) - - if newTop == 0 - hide(prevBtn) - - $el.on "click", ".v-pagination-next", (event) -> - event.preventDefault() - - if container.is(':animated') - return - - visible(prevBtn) - - newTop = nextPage(container, pageSize) - - if -newTop + pageSize > containerSize - hide(nextBtn) - - $el.on "regenerate:pagination", () => - renderNextAndPrev() - - #wait digest end - $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, - scope: { - projects: "=" - } + link: link } module.directive("tgProjectsPagination", ['$timeout', ProjectsPaginationDirective]) + +ProjectsListDirective = ($compile) -> + template = _.template(""" +
    +
    + +
    + +
    + +
    +
    + """) + + 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]) diff --git a/app/partials/projects.jade b/app/partials/projects.jade index 04a25fab..6527a65e 100644 --- a/app/partials/projects.jade +++ b/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") - .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="") + div(tg-projects-list) .create-project-button-wrapper a.button.button-green(href="", ng-click="ctrl.newProject()") Create project diff --git a/app/partials/views/modules/projects-nav.jade b/app/partials/views/modules/projects-nav.jade index 82638ee6..fa3cebb7 100644 --- a/app/partials/views/modules/projects-nav.jade +++ b/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) diff --git a/app/styles/modules/home-projects-list.scss b/app/styles/modules/home-projects-list.scss index ca02b1c7..ad2ee7c3 100644 --- a/app/styles/modules/home-projects-list.scss +++ b/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;