make dropdown append more generic

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,
+            appendedDropdownMenu,
-            bodyDropdownMenuParent;
+            appendedDropdownMenuParent;
+
         var dropdownHelpers = {
             scrollbarWidth: function () {
                 if (!bodyScrollbarWidth) {
@@ -77,58 +78,60 @@ angular
         };
 
         $(window).on('show.bs.dropdown', function (e) {
-            var target = bodyDropdownMenuParent = $(e.target);
+            var target = appendedDropdownMenuParent = $(e.target);
-            if (!target.hasClass('dropdown-to-body')) {
+
+            var appendTo = target.data('appendTo');
+            if (!appendTo) {
                 return true;
             }
 
-            bodyDropdownMenu = target.find('.dropdown-menu');
+            appendedDropdownMenu = target.find('.dropdown-menu');
-            var body = $('body');
+            var appendToEl = $(appendTo);
-            body.append(bodyDropdownMenu.detach());
+            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());
+            $(e.target).append(appendedDropdownMenu.detach());
-            bodyDropdownMenu.hide();
+            appendedDropdownMenu.hide();
-            bodyDropdownMenu = null;
+            appendedDropdownMenu = null;
-            bodyDropdownMenuParent = null;
+            appendedDropdownMenuParent = null;
         });
 
-        $scope.$on('removeBodyDropdownMenu', function (event, args) {
+        $scope.$on('removeAppendedDropdownMenu', function (event, args) {
-            if (!bodyDropdownMenu && !bodyDropdownMenuParent) {
+            if (!appendedDropdownMenu && !appendedDropdownMenuParent) {
                 return true;
             }
 
-            bodyDropdownMenuParent.append(bodyDropdownMenu.detach());
+            appendedDropdownMenuParent.append(appendedDropdownMenu.detach());
-            bodyDropdownMenu.hide();
+            appendedDropdownMenu.hide();
-            bodyDropdownMenu = null;
+            appendedDropdownMenu = null;
-            bodyDropdownMenuParent = null;
+            appendedDropdownMenuParent = null;
         });
     });

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>

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>

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>

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>

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) {

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>

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>

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>

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>