From 3728f012d70d8c47cdf3d25d0a90d06d72e64c37 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 18 Apr 2017 10:19:42 -0400
Subject: [PATCH] make dropdown append more generic

---
 src/app/global/mainController.js              | 53 ++++++++++---------
 .../views/organizationPeople.html             |  2 +-
 .../views/organizationSubvaults.html          |  2 +-
 .../views/organizationSubvaultsUsers.html     |  2 +-
 .../organization/views/organizationVault.html |  2 +-
 src/app/settings/settingsDomainsController.js |  2 +-
 src/app/settings/views/settings.html          |  2 +-
 src/app/settings/views/settingsDomains.html   |  4 +-
 src/app/vault/views/vault.html                |  4 +-
 src/app/vault/views/vaultSubvaults.html       |  2 +-
 10 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/app/global/mainController.js b/src/app/global/mainController.js
index 7aca9060..4eb0678b 100644
--- a/src/app/global/mainController.js
+++ b/src/app/global/mainController.js
@@ -52,10 +52,11 @@ angular
             $scope.$broadcast('vaultAddFolder');
         };
 
-        // Append dropdown menus to body
+        // Append dropdown menu somewhere else
         var bodyScrollbarWidth,
-            bodyDropdownMenu,
-            bodyDropdownMenuParent;
+            appendedDropdownMenu,
+            appendedDropdownMenuParent;
+
         var dropdownHelpers = {
             scrollbarWidth: function () {
                 if (!bodyScrollbarWidth) {
@@ -77,58 +78,60 @@ angular
         };
 
         $(window).on('show.bs.dropdown', function (e) {
-            var target = bodyDropdownMenuParent = $(e.target);
-            if (!target.hasClass('dropdown-to-body')) {
+            var target = appendedDropdownMenuParent = $(e.target);
+
+            var appendTo = target.data('appendTo');
+            if (!appendTo) {
                 return true;
             }
 
-            bodyDropdownMenu = target.find('.dropdown-menu');
-            var body = $('body');
-            body.append(bodyDropdownMenu.detach());
+            appendedDropdownMenu = target.find('.dropdown-menu');
+            var appendToEl = $(appendTo);
+            appendToEl.append(appendedDropdownMenu.detach());
 
-            var eOffset = target.offset();
+            var offset = target.offset();
             var css = {
                 display: 'block',
-                top: eOffset.top + target.outerHeight()
+                top: offset.top + target.outerHeight()
             };
 
-            if (bodyDropdownMenu.hasClass('dropdown-menu-right')) {
+            if (appendedDropdownMenu.hasClass('dropdown-menu-right')) {
                 var scrollbarInfo = dropdownHelpers.scrollbarInfo();
                 var scrollbarWidth = 0;
                 if (scrollbarInfo.visible && scrollbarInfo.width) {
                     scrollbarWidth = scrollbarInfo.width;
                 }
 
-                css.right = $window.innerWidth - scrollbarWidth - (eOffset.left + target.prop('offsetWidth')) + 'px';
+                css.right = $window.innerWidth - scrollbarWidth - (offset.left + target.prop('offsetWidth')) + 'px';
                 css.left = 'auto';
             }
             else {
-                css.left = eOffset.left + 'px';
+                css.left = offset.left + 'px';
                 css.right = 'auto';
             }
 
-            bodyDropdownMenu.css(css);
+            appendedDropdownMenu.css(css);
         });
 
         $(window).on('hide.bs.dropdown', function (e) {
-            if (!bodyDropdownMenu) {
+            if (!appendedDropdownMenu) {
                 return true;
             }
 
-            $(e.target).append(bodyDropdownMenu.detach());
-            bodyDropdownMenu.hide();
-            bodyDropdownMenu = null;
-            bodyDropdownMenuParent = null;
+            $(e.target).append(appendedDropdownMenu.detach());
+            appendedDropdownMenu.hide();
+            appendedDropdownMenu = null;
+            appendedDropdownMenuParent = null;
         });
 
-        $scope.$on('removeBodyDropdownMenu', function (event, args) {
-            if (!bodyDropdownMenu && !bodyDropdownMenuParent) {
+        $scope.$on('removeAppendedDropdownMenu', function (event, args) {
+            if (!appendedDropdownMenu && !appendedDropdownMenuParent) {
                 return true;
             }
 
-            bodyDropdownMenuParent.append(bodyDropdownMenu.detach());
-            bodyDropdownMenu.hide();
-            bodyDropdownMenu = null;
-            bodyDropdownMenuParent = null;
+            appendedDropdownMenuParent.append(appendedDropdownMenu.detach());
+            appendedDropdownMenu.hide();
+            appendedDropdownMenu = null;
+            appendedDropdownMenuParent = null;
         });
     });
diff --git a/src/app/organization/views/organizationPeople.html b/src/app/organization/views/organizationPeople.html
index b97c7e04..d53ad44d 100644
--- a/src/app/organization/views/organizationPeople.html
+++ b/src/app/organization/views/organizationPeople.html
@@ -34,7 +34,7 @@
                         <tr ng-repeat="user in filteredUsers = (users | filter: (filterSearch || '') |
                             orderBy: ['type', 'name', 'email'])">
                             <td style="width: 70px;">
-                                <div class="btn-group dropdown-to-body">
+                                <div class="btn-group" data-append-to="body">
                                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                         <i class="fa fa-cog"></i> <span class="caret"></span>
                                     </button>
diff --git a/src/app/organization/views/organizationSubvaults.html b/src/app/organization/views/organizationSubvaults.html
index e3bab3a1..5bb9962d 100644
--- a/src/app/organization/views/organizationSubvaults.html
+++ b/src/app/organization/views/organizationSubvaults.html
@@ -38,7 +38,7 @@
                         <tr ng-repeat="subvault in filteredSubvaults = (subvaults | filter: (filterSearch || '') |
                             orderBy: ['name'])">
                             <td style="width: 70px;">
-                                <div class="btn-group dropdown-to-body">
+                                <div class="btn-group" data-append-to="body">
                                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                         <i class="fa fa-cog"></i> <span class="caret"></span>
                                     </button>
diff --git a/src/app/organization/views/organizationSubvaultsUsers.html b/src/app/organization/views/organizationSubvaultsUsers.html
index ce21a8db..5420456d 100644
--- a/src/app/organization/views/organizationSubvaultsUsers.html
+++ b/src/app/organization/views/organizationSubvaultsUsers.html
@@ -14,7 +14,7 @@
             <tbody>
                 <tr ng-repeat="user in users | orderBy: ['email']">
                     <td style="width: 70px;">
-                        <div class="btn-group dropdown-to-body">
+                        <div class="btn-group" data-append-to=".modal">
                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                 <i class="fa fa-cog"></i> <span class="caret"></span>
                             </button>
diff --git a/src/app/organization/views/organizationVault.html b/src/app/organization/views/organizationVault.html
index a4247962..25e3e4bd 100644
--- a/src/app/organization/views/organizationVault.html
+++ b/src/app/organization/views/organizationVault.html
@@ -34,7 +34,7 @@
                         <tr ng-repeat="login in subvaultLogins = (logins | filter: filterBySubvault(subvault) |
                             orderBy: ['name', 'username'])">
                             <td style="width: 70px;">
-                                <div class="btn-group dropdown-to-body">
+                                <div class="btn-group" data-append-to="body">
                                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                         <i class="fa fa-cog"></i> <span class="caret"></span>
                                     </button>
diff --git a/src/app/settings/settingsDomainsController.js b/src/app/settings/settingsDomainsController.js
index 4b3aa357..721ea120 100644
--- a/src/app/settings/settingsDomainsController.js
+++ b/src/app/settings/settingsDomainsController.js
@@ -35,7 +35,7 @@
 
         $scope.delete = function (i) {
             $scope.equivalentDomains.splice(i, 1);
-            $scope.$emit('removeBodyDropdownMenu');
+            $scope.$emit('removeAppendedDropdownMenu');
         };
 
         $scope.addEdit = function (i) {
diff --git a/src/app/settings/views/settings.html b/src/app/settings/views/settings.html
index 19317331..1ed5c036 100644
--- a/src/app/settings/views/settings.html
+++ b/src/app/settings/views/settings.html
@@ -115,7 +115,7 @@
         </div>
         <div class="list-group" ng-if="model.organizations && model.organizations.length">
             <div class="list-group-item" ng-repeat="org in model.organizations | orderBy: ['name']">
-                <div class="btn-group dropdown-to-body">
+                <div class="btn-group" data-append-to="body">
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                         <i class="fa fa-cog"></i> <span class="caret"></span>
                     </button>
diff --git a/src/app/settings/views/settingsDomains.html b/src/app/settings/views/settingsDomains.html
index 0ae49957..edbac1f6 100644
--- a/src/app/settings/views/settingsDomains.html
+++ b/src/app/settings/views/settingsDomains.html
@@ -22,7 +22,7 @@
                         <tbody ng-if="equivalentDomains.length">
                             <tr ng-repeat="customDomain in equivalentDomains track by $index">
                                 <td style="width: 70px;">
-                                    <div class="btn-group dropdown-to-body">
+                                    <div class="btn-group" data-append-to="body">
                                         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                             <i class="fa fa-cog"></i> <span class="caret"></span>
                                         </button>
@@ -70,7 +70,7 @@
                         <tbody ng-if="globalEquivalentDomains.length">
                             <tr ng-repeat="globalDomain in globalEquivalentDomains">
                                 <td style="width: 70px;">
-                                    <div class="btn-group dropdown-to-body">
+                                    <div class="btn-group" data-append-to="body">
                                         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                             <i class="fa fa-cog"></i> <span class="caret"></span>
                                         </button>
diff --git a/src/app/vault/views/vault.html b/src/app/vault/views/vault.html
index f087d455..f7a889c3 100644
--- a/src/app/vault/views/vault.html
+++ b/src/app/vault/views/vault.html
@@ -45,7 +45,7 @@
                         <tr ng-repeat="login in favoriteLogins = (logins | filter: { favorite: true } |
                             filter: (main.searchVaultText || '')) track by login.id">
                             <td style="width: 70px;">
-                                <div class="btn-group dropdown-to-body">
+                                <div class="btn-group" data-append-to="body">
                                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                         <i class="fa fa-cog"></i> <span class="caret"></span>
                                     </button>
@@ -131,7 +131,7 @@
                         <tr ng-repeat="login in folderLogins = (logins | filter: { folderId: folder.id } |
                             filter: (main.searchVaultText || '')) track by login.id">
                             <td style="width: 70px;">
-                                <div class="btn-group dropdown-to-body">
+                                <div class="btn-group" data-append-to="body">
                                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                         <i class="fa fa-cog"></i> <span class="caret"></span>
                                     </button>
diff --git a/src/app/vault/views/vaultSubvaults.html b/src/app/vault/views/vaultSubvaults.html
index e4f78baa..938891dc 100644
--- a/src/app/vault/views/vaultSubvaults.html
+++ b/src/app/vault/views/vaultSubvaults.html
@@ -49,7 +49,7 @@
                         <tr ng-repeat="login in subvaultLogins = (logins | filter: filterBySubvault(subvault) |
                             filter: (main.searchVaultText || '') | orderBy: ['name', 'username'])">
                             <td style="width: 70px;">
-                                <div class="btn-group dropdown-to-body">
+                                <div class="btn-group" data-append-to="body">
                                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                         <i class="fa fa-cog"></i> <span class="caret"></span>
                                     </button>