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", [])
|
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
|
## Project
|
||||||
#############################################################################
|
#############################################################################
|
||||||
|
|
@ -180,32 +35,6 @@ ProjectMenuDirective = ($log, $compile, $auth, $rootscope, $tgAuth, $location, $
|
||||||
menuEntriesTemplate = $template.get("project/project-menu.html", true)
|
menuEntriesTemplate = $template.get("project/project-menu.html", true)
|
||||||
|
|
||||||
mainTemplate = _.template("""
|
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>
|
<div class="menu-container"></div>
|
||||||
""")
|
""")
|
||||||
|
|
||||||
|
|
@ -275,10 +104,10 @@ ProjectMenuDirective = ($log, $compile, $auth, $rootscope, $tgAuth, $location, $
|
||||||
renderMainMenu($el)
|
renderMainMenu($el)
|
||||||
project = null
|
project = null
|
||||||
|
|
||||||
$el.on "click", ".logo", (event) ->
|
# $el.on "click", ".logo", (event) ->
|
||||||
event.preventDefault()
|
# event.preventDefault()
|
||||||
target = angular.element(event.currentTarget)
|
# target = angular.element(event.currentTarget)
|
||||||
$rootscope.$broadcast("nav:projects-list:open")
|
# $rootscope.$broadcast("nav:projects-list:open")
|
||||||
|
|
||||||
$el.on "click", ".user-settings .avatar", (event) ->
|
$el.on "click", ".user-settings .avatar", (event) ->
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|
|
||||||
|
|
@ -116,132 +116,6 @@ class ProjectController extends taiga.Controller
|
||||||
|
|
||||||
module.controller("ProjectController", ProjectController)
|
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) ->
|
ProjectsListDirective = ($compile, $template) ->
|
||||||
template = $template.get('project/project-list.html', true)
|
template = $template.get('project/project-list.html', true)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,12 @@ html(lang="en")
|
||||||
//include partials/includes/modules/projects-nav
|
//include partials/includes/modules/projects-nav
|
||||||
include partials/includes/components/notification-message
|
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
|
//- the content of nav.menu is in coffe.modules.base TaigaMain directive
|
||||||
//nav.menu.hidden(tg-project-menu)
|
//nav.menu.hidden(tg-project-menu)
|
||||||
|
|
||||||
|
|
||||||
div.master(ng-view)
|
div.master(ng-view)
|
||||||
include partials/includes/modules/navigation-bar/navbar
|
|
||||||
|
|
||||||
div.lightbox.lightbox-generic-ask
|
div.lightbox.lightbox-generic-ask
|
||||||
include partials/includes/modules/lightbox-generic-ask
|
include partials/includes/modules/lightbox-generic-ask
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
div(tg-projects-pagination)
|
div(tg-projects-pagination)
|
||||||
.projects-pagination
|
|
||||||
a.v-pagination-previous.icon.icon-arrow-up(href='')
|
|
||||||
.v-pagination-list
|
|
||||||
ul.projects-list
|
ul.projects-list
|
||||||
<% _.each(projects, function(project) { %>
|
<% _.each(projects, function(project) { %>
|
||||||
li
|
li
|
||||||
a(href!='<%- project.url %>')
|
a.button(href!='<%- project.url %>')
|
||||||
<%- project.name %>
|
<%- project.name %>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
a.v-pagination-next.icon.icon-arrow-bottom(href='')
|
|
||||||
Loading…
Reference in New Issue