Move users/groups overlay into app container (#218)

* Create common methods to manage overlay

* Move overlay specific style to app common

* Replace existing overlay management with new methods

app.js

@@ -152,6 +152,48 @@ define(function(require) {
 				container.empty();
 				monster.pub('voip.' + id + '.render', args);
 			});
+		},
+
+		overlayInsert: function() {
+			$('#monster_content')
+				.append($('<div>', {
+					id: 'voip_container_overlay'
+				}));
+		},
+
+		overlayRemove: function() {
+			$('#monster_content')
+				.find('#voip_container_overlay')
+					.remove();
+		},
+
+		/**
+		 * @param  {jQuery} $template
+		 * @param  {String} entityId
+		 */
+		overlayBindOnClick: function($template, entityId) {
+			var self = this,
+				editContainerClass = '.edit-' + entityId;
+
+			$('#monster_content').on('click', '#voip_container_overlay', function() {
+				$template.find(editContainerClass).slideUp('400', function() {
+					$(this).empty();
+				});
+
+				self.overlayRemove();
+
+				$template.find('.grid-cell.active').css({
+					'z-index': '0'
+				});
+
+				$template.find('.grid-row.active').parent().siblings(editContainerClass).css({
+					'z-index': '0'
+				});
+
+				$template
+					.find('.grid-cell.active, .grid-row.active')
+						.removeClass('active');
+			});
 		}
 	};
 

style/app.css

@@ -14,4 +14,14 @@
 
 #voip_container .left-menu > div {
 	margin-top: 10px;
-}
+}
+
+#voip_container_overlay {
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #000;
+	opacity: .3;
+}

submodules/groups/groups.css

@@ -1,13 +1,3 @@
-#groups_container_overlay {
-	position: fixed;
-	top: 0;
-	right: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #000;
-	opacity: .3;
-}
-
 #groups_container .groups-header {
 	font-size: 18px;
 	line-height: 30px;
@@ -592,4 +582,4 @@
 .monster-feature-popup-container[data-feature="prepend"] form input {
 	margin-bottom: 0;
 	width: 100px;
-}
+}

submodules/groups/groups.js

@@ -21,7 +21,7 @@ define(function(require) {
 				_groupId = args.groupId,
 				callback = args.callback;
 
-			self.groupsRemoveOverlay();
+			self.overlayRemove();
 
 			self.groupsGetData(function(data) {
 				var hasOldData = _.find(data.callflows, function(callflow) {
@@ -206,7 +206,7 @@ define(function(require) {
 					template.find('.grid-cell').removeClass('active');
 					template.find('.grid-row').removeClass('active');
 
-					self.groupsRemoveOverlay();
+					self.overlayRemove();
 					cell.css({
 						'position': 'inline-block',
 						'z-index': '0'
@@ -239,7 +239,7 @@ define(function(require) {
 
 						row.find('.edit-groups').append(template).slideDown();
 
-						$('body').append($('<div id="groups_container_overlay"></div>'));
+						self.overlayInsert();
 					});
 				}
 			});
@@ -272,7 +272,7 @@ define(function(require) {
 						'z-index': '0'
 					});
 					template.find('.grid-row.active').removeClass('active');
-					self.groupsRemoveOverlay();
+					self.overlayRemove();
 
 					template.find('.grid-cell.active').removeClass('active');
 				});
@@ -324,26 +324,7 @@ define(function(require) {
 				});
 			});
 
-			$('body').on('click', '#groups_container_overlay', function() {
-				template.find('.edit-groups').slideUp('400', function() {
-					$(this).empty();
-				});
-
-				self.groupsRemoveOverlay();
-
-				template.find('.grid-cell.active').css({
-					'position': 'inline-block',
-					'z-index': '0'
-				});
-
-				template.find('.grid-row.active').parent().siblings('.edit-groups').css({
-					'position': 'block',
-					'z-index': '0'
-				});
-
-				template.find('.grid-cell.active').removeClass('active');
-				template.find('.grid-row.active').removeClass('active');
-			});
+			self.overlayBindOnClick(template, 'groups');
 		},
 
 		groupsCreationMergeData: function(data, template) {
@@ -2396,10 +2377,6 @@ define(function(require) {
 			});
 		},
 
-		groupsRemoveOverlay: function() {
-			$('body').find('#groups_container_overlay').remove();
-		},
-
 		groupsUpdateOriginalUser: function(userToUpdate, callback) {
 			var self = this;
 

submodules/users/users.js

@@ -51,7 +51,7 @@ define(function(require) {
 				_sortBy = args.sortBy,
 				callback = args.callback;
 
-			self.usersRemoveOverlay();
+			self.overlayRemove();
 
 			self.usersGetData(function(data) {
 				var dataTemplate = self.usersFormatListData(data, _sortBy),
@@ -592,7 +592,7 @@ define(function(require) {
 					template.find('.grid-cell').removeClass('active');
 					template.find('.grid-row').removeClass('active');
 
-					self.usersRemoveOverlay();
+					self.overlayRemove();
 					cell.css({
 						'position': 'initial',
 						'z-index': '0'
@@ -661,7 +661,7 @@ define(function(require) {
 							$('body').animate({ scrollTop: row.offset().top - (window.innerHeight - row.height() - 10) });
 						});
 
-						$('body').append($('<div id="users_container_overlay"></div>'));
+						self.overlayInsert();
 					});
 				}
 			});
@@ -699,7 +699,7 @@ define(function(require) {
 					});
 					template.find('.grid-row.active').removeClass('active');
 
-					self.usersRemoveOverlay();
+					self.overlayRemove();
 
 					template.find('.grid-cell.active').removeClass('active');
 				});
@@ -1639,26 +1639,7 @@ define(function(require) {
 				}
 			});
 
-			$('body').on('click', '#users_container_overlay', function() {
-				template.find('.edit-user').slideUp('400', function() {
-					$(this).empty();
-				});
-
-				self.usersRemoveOverlay();
-
-				template.find('.grid-cell.active').css({
-					'position': 'inline-block',
-					'z-index': '0'
-				});
-
-				template.find('.grid-row.active').parent().siblings('.edit-user').css({
-					'position': 'block',
-					'z-index': '0'
-				});
-
-				template.find('.grid-cell.active').removeClass('active');
-				template.find('.grid-row.active').removeClass('active');
-			});
+			self.overlayBindOnClick(template, 'user');
 		},
 
 		usersBindAddUserEvents: function(args) {
@@ -5431,10 +5412,6 @@ define(function(require) {
 			return result;
 		},
 
-		usersRemoveOverlay: function() {
-			$('body').find('#users_container_overlay').remove();
-		},
-
 		usersResetPassword: function(data, callback) {
 			var self = this,
 				dataPassword = {

submodules/users/users.scss

@@ -1,15 +1,5 @@
 @import '../../../../css/partials/base';
 
-#users_container_overlay {
-	position: fixed;
-	top: 0;
-	right: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #000;
-	opacity: .3;
-}
-
 #users_container .users-header {
 	font-size: 18px;
 	line-height: 30px;