popover refactor

app/coffee/modules/backlog/main.coffee

@@ -527,11 +527,11 @@ UsRolePointsSelectorDirective = ($rootscope) ->
                 $el.find(".icon-arrow-bottom").remove()
 
         $scope.$on "uspoints:select", (ctx, roleId, roleName) ->
-            $el.find(".popover").hide()
+            $el.find(".popover").popover().close()
             $el.find(".header-points").html("#{roleName}/<span>Total</span>")
 
         $scope.$on "uspoints:clear-selection", (ctx, roleId) ->
-            $el.find(".popover").hide()
+            $el.find(".popover").popover().close()
             $el.find(".header-points").text("Points") #TODO: i18n
 
         # Dom Event Handlers
@@ -541,10 +541,7 @@ UsRolePointsSelectorDirective = ($rootscope) ->
             if target.is("span") or target.is("div")
                 event.stopPropagation()
 
-            $el.find(".popover").show()
+            $el.find(".popover").popover().open()
-            body = angular.element("body")
-            body.one "click", (event) ->
-                $el.find(".popover").hide()
 
         $el.on "click", ".clear-selection", (event) ->
             event.preventDefault()
@@ -601,7 +598,7 @@ UsPointsDirective = ($repo) ->
             selectedRoleId = _.keys(us.points)[0]
 
         showPopPoints = () ->
-            $(".popover").hide()
+            $(".popover").popover().close()
             $el.find(".pop-points-open").remove()
             $el.append(pointsTemplate({ "points":  $scope.project.points }))
             dataPointId = us.points[updatingSelectedRoleId]
@@ -614,7 +611,6 @@ UsPointsDirective = ($repo) ->
             $el.find(".pop-points-open").show()
 
         showPopRoles = () ->
-            $(".popover").hide()
             $el.find(".pop-role").remove()
             rolePoints = _.clone(_.filter($scope.project.roles, "computable"), true)
 
@@ -625,7 +621,8 @@ UsPointsDirective = ($repo) ->
             _.map rolePoints, (v, k) ->
                 v.points = undefinedToQuestion($scope.pointsById[us.points[v.id]].value)
             $el.append(selectionTemplate({ "rolePoints":  rolePoints }))
-            $el.find(".pop-role").show()
+
+            $el.find(".pop-role").popover().open(() -> $(this).remove())
 
         updatePoints = (roleId) ->
             # Update the dom with the points
@@ -669,10 +666,6 @@ UsPointsDirective = ($repo) ->
             else
                 showPopRoles()
 
-            body = angular.element("body")
-            body.one "click", (event) ->
-                $el.find(".popover").hide()
-
         $el.on "click", ".role", (event) ->
             event.preventDefault()
             event.stopPropagation()

app/coffee/modules/common/popovers.coffee

@@ -30,7 +30,7 @@ module = angular.module("taigaCommon")
 
 # FIXME: change to less generic name.
 
-UsStatusDirective = ($repo) ->
+UsStatusDirective = ($repo, popoverService) ->
     ###
     Print the status of a US and a popover to change it.
     - tg-us-status: The user story
@@ -67,19 +67,18 @@ UsStatusDirective = ($repo) ->
         $el.on "click", ".us-status", (event) ->
             event.preventDefault()
             event.stopPropagation()
-            $(".popover").hide()
-            $el.find(".pop-status").show()
 
-            body = angular.element("body")
+            $el.find(".pop-status").popover().open()
-            body.one "click", (event) ->
+
-                $el.find(".popover").hide()
+            # pop = $el.find(".pop-status")
+            # popoverService.open(pop)
 
         $el.on "click", ".status", (event) ->
             event.preventDefault()
             event.stopPropagation()
             target = angular.element(event.currentTarget)
             us.status = target.data("status-id")
-            $el.find(".pop-status").hide()
+            $el.find(".pop-status").popover().close()
             updateUsStatus($el, us, $scope.usStatusById)
 
             $scope.$apply () ->
@@ -101,3 +100,40 @@ UsStatusDirective = ($repo) ->
     return {link: link}
 
 module.directive("tgUsStatus", ["$tgRepo", UsStatusDirective])
+
+$.fn.popover = () ->
+    $el = @
+
+    closePopover = (onClose) =>
+        if onClose then onClose.call($el)
+
+        $el.fadeOut () =>
+            $el.removeClass("active")
+
+        $el.off("popup:close")
+
+
+    closeAll = () =>
+        $(".popover.active").each () ->
+            $(this).trigger("popup:close")
+
+    open = (onClose) =>
+        closeAll()
+
+        $el
+        .fadeIn () =>
+            $el.addClass("active")
+            $(document.body).off("popover")
+
+            $(document.body).one "click.popover", () =>
+                closeAll()
+
+
+        $el.on "popup:close", () => closePopover(onClose)
+
+
+
+    close = () =>
+        $el.trigger("popup:close")
+
+    return {open: open, close: close, closeAll: closeAll}

app/coffee/modules/issues/detail.coffee

@@ -253,11 +253,7 @@ IssueStatusDirective = () ->
             $el.on "click", ".severity-data", (event) ->
                 event.preventDefault()
                 event.stopPropagation()
-                $(".popover").hide()
+                $el.find(".pop-severity").popover().open()
-                $el.find(".pop-severity").show()
-                body = angular.element("body")
-                body.one "click", (event) ->
-                    $el.find(".popover").hide()
 
             $el.on "click", ".severity", (event) ->
                 event.preventDefault()
@@ -265,16 +261,12 @@ IssueStatusDirective = () ->
                 target = angular.element(event.currentTarget)
                 $model.$modelValue.severity = target.data("severity-id")
                 renderIssuestatus($model.$modelValue)
-                $el.find(".popover").hide()
+                $.fn.popover().closeAll()
 
             $el.on "click", ".priority-data", (event) ->
                 event.preventDefault()
                 event.stopPropagation()
-                $(".popover").hide()
+                $el.find(".pop-priority").popover().open()
-                $el.find(".pop-priority").show()
-                body = angular.element("body")
-                body.one "click", (event) ->
-                    $el.find(".popover").hide()
 
             $el.on "click", ".priority", (event) ->
                 event.preventDefault()
@@ -282,16 +274,12 @@ IssueStatusDirective = () ->
                 target = angular.element(event.currentTarget)
                 $model.$modelValue.priority = target.data("priority-id")
                 renderIssuestatus($model.$modelValue)
-                $el.find(".popover").hide()
+                $.fn.popover().closeAll()
 
             $el.on "click", ".status-data", (event) ->
                 event.preventDefault()
                 event.stopPropagation()
-                $(".popover").hide()
+                $el.find(".pop-status").popover().open()
-                $el.find(".pop-status").show()
-                body = angular.element("body")
-                body.one "click", (event) ->
-                    $el.find(".popover").hide()
 
             $el.on "click", ".status", (event) ->
                 event.preventDefault()
@@ -299,7 +287,7 @@ IssueStatusDirective = () ->
                 target = angular.element(event.currentTarget)
                 $model.$modelValue.status = target.data("status-id")
                 renderIssuestatus($model.$modelValue)
-                $el.find(".popover").hide()
+                $.fn.popover().closeAll()
 
     return {link:link, require:"ngModel"}
 

app/coffee/modules/nav.coffee

@@ -202,13 +202,7 @@ ProjectMenuDirective = ($log, $compile, $auth, $rootscope, $tgAuth, $location) -
 
         $el.on "click", ".user-settings .avatar", (event) ->
             event.preventDefault()
-            $el.find(".user-settings .popover").show()
+            $el.find(".user-settings .popover").popover().open()
-            # Hide when click outside
-            body = angular.element("body")
-            body.on "click", (event) =>
-                if angular.element(event.target).parents(".user-settings").length == 0
-                    $el.find(".popover").hide()
-                    body.unbind("click")
 
         $el.on "click", ".logout", (event) ->
             event.preventDefault()

app/coffee/modules/tasks/detail.coffee

@@ -211,11 +211,7 @@ TaskStatusDirective = () ->
             $el.on "click", ".status-data", (event) ->
                 event.preventDefault()
                 event.stopPropagation()
-                $(".popover").hide()
+                $el.find(".pop-status").popover().open()
-                $el.find(".pop-status").show()
-                body = angular.element("body")
-                body.one "click", (event) ->
-                    $el.find(".popover").hide()
 
             $el.on "click", ".status", (event) ->
                 event.preventDefault()
@@ -223,7 +219,7 @@ TaskStatusDirective = () ->
                 target = angular.element(event.currentTarget)
                 $model.$modelValue.status = target.data("status-id")
                 renderTaskstatus($model.$modelValue)
-                $el.find(".popover").hide()
+                $el.find(".popover").popover().close()
 
     return {link:link, require:"ngModel"}
 

app/coffee/modules/userstories/detail.coffee

@@ -233,14 +233,13 @@ UsStatusDetailDirective = () ->
         editable = $attrs.editable?
         updatingSelectedRoleId = null
 
-        showSelectPoints = () ->
+        showSelectPoints = (onClose) ->
             us = $model.$modelValue
             $el.find(".pop-points-open").remove()
             $el.find(".points-per-role").append(selectionPointsTemplate({ "points":  $scope.project.points }))
             $el.find(".pop-points-open a[data-point-id='#{us.points[updatingSelectedRoleId]}']").addClass("active")
             # If not showing role selection let's move to the left
-            $(".popover").hide()
+            $el.find(".pop-points-open").popover().open(onClose)
-            $el.find(".pop-points-open").show()
 
         calculateTotalPoints = (us)->
             values = _.map(us.points, (v, k) -> $scope.pointsById[v].value)
@@ -283,11 +282,7 @@ UsStatusDetailDirective = () ->
             $el.on "click", ".status-data", (event) ->
                 event.preventDefault()
                 event.stopPropagation()
-                $(".popover").hide()
+                $el.find(".pop-status").popover().open()
-                $el.find(".pop-status").show()
-                body = angular.element("body")
-                body.one "click", (event) ->
-                    $el.find(".popover").hide()
 
             $el.on "click", ".status", (event) ->
                 event.preventDefault()
@@ -295,7 +290,7 @@ UsStatusDetailDirective = () ->
                 target = angular.element(event.currentTarget)
                 $model.$modelValue.status = target.data("status-id")
                 renderUsstatus($model.$modelValue)
-                $el.find(".popover").hide()
+                $.fn.popover().closeAll()
 
             $el.on "click", ".total.clickable", (event) ->
                 event.preventDefault()
@@ -304,17 +299,13 @@ UsStatusDetailDirective = () ->
                 updatingSelectedRoleId = target.data("role-id")
                 target.siblings().removeClass('active')
                 target.addClass('active')
-                showSelectPoints()
+                showSelectPoints(() -> target.removeClass('active'))
-                body = angular.element("body")
-                body.one "click", (event) ->
-                    $el.find(".popover").hide()
-                    target.removeClass('active')
             $el.on "click", ".point", (event) ->
                 event.preventDefault()
                 event.stopPropagation()
 
                 target = angular.element(event.currentTarget)
-                $el.find(".popover").hide()
+                $.fn.popover().closeAll()
 
                 $scope.$apply () ->
                     us = $model.$modelValue