Basic code clean for project navigation
Xavier Julián
Juanfran
parent
0b4cf71c67
commit
66f67f9f7e
|
|
@ -27,151 +27,6 @@ timeout = @.taiga.timeout
|
|||
module = angular.module("taigaNavMenu", [])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Projects Navigation
|
||||
#############################################################################
|
||||
|
||||
class ProjectsNavigationController extends taiga.Controller
|
||||
@.$inject = ["$scope", "$rootScope", "$tgResources", "$tgNavUrls", "$projectUrl"]
|
||||
|
||||
constructor: (@scope, @rootscope, @rs, @navurls, @projectUrl) ->
|
||||
promise = @.loadInitialData()
|
||||
promise.then null, ->
|
||||
console.log "FAIL"
|
||||
# TODO
|
||||
|
||||
# Listen when someone wants to reload all the projects
|
||||
@scope.$on "projects:reload", =>
|
||||
@.loadInitialData()
|
||||
|
||||
# Listen when someone has reloaded a project
|
||||
@scope.$on "project:loaded", (ctx, project) =>
|
||||
@.loadInitialData()
|
||||
|
||||
loadInitialData: ->
|
||||
return @rs.projects.listByMember(@rootscope.user?.id).then (projects) =>
|
||||
for project in projects
|
||||
project.url = @projectUrl.get(project)
|
||||
@scope.projects = projects
|
||||
@scope.filteredProjects = projects
|
||||
@scope.filterText = ""
|
||||
return projects
|
||||
|
||||
newProject: ->
|
||||
@scope.$apply () =>
|
||||
@rootscope.$broadcast("projects:create")
|
||||
|
||||
filterProjects: (text) ->
|
||||
@scope.filteredProjects = _.filter @scope.projects, (project) ->
|
||||
project.name.toLowerCase().indexOf(text) > -1
|
||||
|
||||
@scope.filterText = text
|
||||
@rootscope.$broadcast("projects:filtered")
|
||||
|
||||
module.controller("ProjectsNavigationController", ProjectsNavigationController)
|
||||
|
||||
|
||||
ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $location, $compile, $template) ->
|
||||
baseTemplate = $template.get("project/project-navigation-base.html", true)
|
||||
projectsTemplate = $template.get("project/project-navigation-list.html", true)
|
||||
|
||||
overlay = $(".projects-nav-overlay")
|
||||
loadingStart = 0
|
||||
|
||||
hideMenu = () ->
|
||||
if overlay.is(':visible')
|
||||
difftime = new Date().getTime() - loadingStart
|
||||
timeoutValue = 0
|
||||
|
||||
if (difftime < 1000)
|
||||
timeoutValue = 1000 - timeoutValue
|
||||
|
||||
timeout timeoutValue, ->
|
||||
overlay.one 'transitionend', () ->
|
||||
$(document.body)
|
||||
.removeClass("loading-project open-projects-nav closed-projects-nav")
|
||||
.css("overflow-x", "visible")
|
||||
|
||||
overlay.hide()
|
||||
|
||||
$(document.body).addClass("closed-projects-nav")
|
||||
|
||||
tgLoader.disablePreventLoading()
|
||||
|
||||
|
||||
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()
|
||||
|
||||
$(document).on 'keydown', (e) =>
|
||||
code = if e.keyCode then e.keyCode else e.which
|
||||
if code == 27
|
||||
hideMenu()
|
||||
|
||||
$scope.$on "nav:projects-list:open", ->
|
||||
if !$(document.body).hasClass("open-projects-nav")
|
||||
animationFrame.add () => overlay.show()
|
||||
|
||||
animationFrame.add(
|
||||
() => $(document.body).css("overflow-x", "hidden")
|
||||
() => $(document.body).toggleClass("open-projects-nav")
|
||||
)
|
||||
|
||||
$el.on "click", ".projects-list > li > a", (event) ->
|
||||
# HACK: to solve a problem with the loader when the next url
|
||||
# is equal to the current one
|
||||
target = angular.element(event.currentTarget)
|
||||
nextUrl = target.prop("href")
|
||||
currentUrl = $location.absUrl()
|
||||
if nextUrl == currentUrl
|
||||
hideMenu()
|
||||
return
|
||||
# END HACK
|
||||
|
||||
$(document.body).addClass('loading-project')
|
||||
|
||||
tgLoader.preventLoading()
|
||||
|
||||
loadingStart = new Date().getTime()
|
||||
|
||||
$el.on "click", ".create-project-button", (event) ->
|
||||
event.preventDefault()
|
||||
$ctrl.newProject()
|
||||
|
||||
$el.on "keyup", ".search-project", (event) ->
|
||||
target = angular.element(event.currentTarget)
|
||||
$ctrl.filterProjects(target.val())
|
||||
|
||||
$scope.$on "projects:filtered", ->
|
||||
renderProjects($scope.filteredProjects)
|
||||
|
||||
$scope.$watch "projects", (projects) ->
|
||||
render(projects) if projects?
|
||||
|
||||
return {
|
||||
require: ["tgProjectsNav"]
|
||||
controller: ProjectsNavigationController
|
||||
link: link
|
||||
}
|
||||
|
||||
|
||||
module.directive("tgProjectsNav", ["$rootScope", "animationFrame", "$timeout", "tgLoader", "$tgLocation", "$compile",
|
||||
"$tgTemplate", ProjectsNavigationDirective])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Project
|
||||
#############################################################################
|
||||
|
|
@ -180,32 +35,6 @@ ProjectMenuDirective = ($log, $compile, $auth, $rootscope, $tgAuth, $location, $
|
|||
menuEntriesTemplate = $template.get("project/project-menu.html", true)
|
||||
|
||||
mainTemplate = _.template("""
|
||||
<div class="logo-container logo">
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.2 134.3" version="1.1" preserveAspectRatio="xMidYMid meet">
|
||||
<style>
|
||||
path {
|
||||
fill:#f5f5f5;
|
||||
opacity:0.7;
|
||||
}
|
||||
</style>
|
||||
<g transform="translate(-307.87667,-465.22863)">
|
||||
<g class="bottom">
|
||||
<path transform="matrix(-0.14066483,0.99005727,-0.99005727,0.14066483,0,0)" d="m561.8-506.6 42 0 0 42-42 0z" />
|
||||
<path transform="matrix(0.14066483,-0.99005727,0.99005727,-0.14066483,0,0)" d="m-645.7 422.6 42 0 0 42-42 0z" />
|
||||
<path transform="matrix(0.99005727,0.14066483,0.14066483,0.99005727,0,0)" d="m266.6 451.9 42 0 0 42-42 0z" />
|
||||
<path transform="matrix(-0.99005727,-0.14066483,-0.14066483,-0.99005727,0,0)" d="m-350.6-535.9 42 0 0 42-42 0z" />
|
||||
</g>
|
||||
<g class="top">
|
||||
<path transform="matrix(-0.60061118,-0.79954125,0.60061118,-0.79954125,0,0)" d="m-687.1-62.7 42 0 0 42-42 0z" />
|
||||
<path transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061118,0,0)" d="m166.6-719.6 42 0 0 42-42 0z" />
|
||||
<path transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" d="m603.1-21.3 42 0 0 42-42 0z" />
|
||||
<path transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061118,0,0)" d="m-250.7 635.8 42 0 0 42-42 0z" />
|
||||
<path transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" d="m630.3 100 22.6 0 0 22.6-22.6 0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="item">taiga<sup>[beta]</sup></span>
|
||||
</div>
|
||||
<div class="menu-container"></div>
|
||||
""")
|
||||
|
||||
|
|
@ -275,10 +104,10 @@ ProjectMenuDirective = ($log, $compile, $auth, $rootscope, $tgAuth, $location, $
|
|||
renderMainMenu($el)
|
||||
project = null
|
||||
|
||||
$el.on "click", ".logo", (event) ->
|
||||
event.preventDefault()
|
||||
target = angular.element(event.currentTarget)
|
||||
$rootscope.$broadcast("nav:projects-list:open")
|
||||
# $el.on "click", ".logo", (event) ->
|
||||
# event.preventDefault()
|
||||
# target = angular.element(event.currentTarget)
|
||||
# $rootscope.$broadcast("nav:projects-list:open")
|
||||
|
||||
$el.on "click", ".user-settings .avatar", (event) ->
|
||||
event.preventDefault()
|
||||
|
|
|
|||
|
|
@ -116,132 +116,6 @@ class ProjectController extends taiga.Controller
|
|||
|
||||
module.controller("ProjectController", ProjectController)
|
||||
|
||||
|
||||
ProjectsPaginationDirective = ($timeout) ->
|
||||
link = ($scope, $el, $attrs) ->
|
||||
prevBtn = $el.find(".v-pagination-previous")
|
||||
nextBtn = $el.find(".v-pagination-next")
|
||||
container = $el.find("ul")
|
||||
|
||||
pageSize = 0
|
||||
containerSize = 0
|
||||
|
||||
render = ->
|
||||
pageSize = $el.find(".v-pagination-list").height()
|
||||
|
||||
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()
|
||||
|
||||
hasPagination = ->
|
||||
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
|
||||
|
||||
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)
|
||||
|
||||
$scope.$on "regenerate:project-pagination", ->
|
||||
remove()
|
||||
render()
|
||||
|
||||
$(window).on "resize.projects-pagination", render
|
||||
|
||||
$scope.$on "$destroy", ->
|
||||
$(window).off "resize.projects-pagination"
|
||||
|
||||
return {
|
||||
link: link
|
||||
}
|
||||
|
||||
module.directive("tgProjectsPagination", ['$timeout', ProjectsPaginationDirective])
|
||||
|
||||
ProjectsListDirective = ($compile, $template) ->
|
||||
template = $template.get('project/project-list.html', true)
|
||||
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ html(lang="en")
|
|||
//include partials/includes/modules/projects-nav
|
||||
include partials/includes/components/notification-message
|
||||
|
||||
include partials/includes/modules/navigation-bar/navbar
|
||||
|
||||
//- the content of nav.menu is in coffe.modules.base TaigaMain directive
|
||||
//nav.menu.hidden(tg-project-menu)
|
||||
|
||||
|
||||
div.master(ng-view)
|
||||
include partials/includes/modules/navigation-bar/navbar
|
||||
|
||||
div.lightbox.lightbox-generic-ask
|
||||
include partials/includes/modules/lightbox-generic-ask
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
div(tg-projects-pagination)
|
||||
.projects-pagination
|
||||
a.v-pagination-previous.icon.icon-arrow-up(href='')
|
||||
.v-pagination-list
|
||||
ul.projects-list
|
||||
<% _.each(projects, function(project) { %>
|
||||
li
|
||||
a(href!='<%- project.url %>')
|
||||
a.button(href!='<%- project.url %>')
|
||||
<%- project.name %>
|
||||
<% }) %>
|
||||
a.v-pagination-next.icon.icon-arrow-bottom(href='')
|
||||
Loading…
Reference in New Issue