Add eventlistener to body to close dropdown

joomla · Jul 11, 2017 · 1e72e40 · 1e72e40
1 parent abdd678
commit 1e72e40
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 16 deletions.
diff --git a/administrator/templates/atum/css/template-rtl.css.map b/administrator/templates/atum/css/template-rtl.css.map
diff --git a/administrator/templates/atum/css/template-rtl.min.css b/administrator/templates/atum/css/template-rtl.min.css
diff --git a/administrator/templates/atum/css/template.css.map b/administrator/templates/atum/css/template.css.map
diff --git a/administrator/templates/atum/css/template.min.css b/administrator/templates/atum/css/template.min.css
diff --git a/administrator/templates/atum/scss/blocks/_searchtools.scss b/administrator/templates/atum/scss/blocks/_searchtools.scss
@@ -28,6 +28,11 @@
     .custom-select {
       width: 100%;
     }
+
+    &.js-filters-show {
+      display: flex;
+    }
+
   }
 
   .js-stools-field-filter {
@@ -80,10 +85,6 @@
 
   }
 
-  .js-stools-container-filters-visible {
-    display: inline-block;
-  }
-
   .js-stools-field-list,
   .js-stools-field-filter {
     display: block;

diff --git a/media/system/js/searchtools.js b/media/system/js/searchtools.js
@@ -110,7 +110,7 @@
 				self.filterButton.addEventListener('click', function(e) {
 					self.toggleFilters();
 					e.stopPropagation();
-					e.preventDefault();
+					e.preventDefault();				
 				});
 			}
 
@@ -171,6 +171,16 @@
 			});
 
 			self.checkActiveStatus(self);
+
+			document.body.addEventListener('click', function(e) {
+				if (document.body.classList.contains('filters-shown')) {
+					self.hideFilters();
+				}
+			});
+			self.filterContainer.addEventListener('click',function(e) {
+			    e.stopPropagation();
+			}, true);
+
 		},
 		checkFilter: function (element) {
 			var self = this;
@@ -220,7 +230,6 @@
 			var els = [].slice.call(el.querySelectorAll('.js-stools-field-filter select'));
 			els.forEach(function(item) {
 				if (item.classList.contains('active')) {
-					console.log('hello!!!!!');
 					cont.filterButton.classList.remove('btn-secondary');
 					cont.filterButton.classList.add('btn-primary');
 					return '';
@@ -255,16 +264,16 @@
 		// Common container functions
 		hideContainer: function (container) {
 			if (container) {
-				container.style.display = 'none';
-				container.classList.remove('shown');
+				container.classList.remove('js-filters-show');
+				document.body.classList.remove('filters-shown');
 			}
 		},
 		showContainer: function (container) {
-			container.style.display = 'flex';
-			container.classList.add('shown');
+			container.classList.add('js-filters-show');
+			document.body.classList.add('filters-shown');
 		},
 		toggleContainer: function (container) {
-			if (container.classList.contains('shown')) {
+			if (container.classList.contains('js-filters-show')) {
 				this.hideContainer(container);
 			} else {
 				this.showContainer(container);

diff --git a/media/system/js/searchtools.min.js b/media/system/js/searchtools.min.js