Added support for highlighting tabs with errors in them in bootstrap_…

…tabs template.
Fabrik · Apr 17, 2017 · 93d6be2 · 93d6be2
1 parent 2ce869d
commit 93d6be2
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 4 deletions.
diff --git a/components/com_fabrik/views/form/tmpl/bootstrap_tabs/default.php b/components/com_fabrik/views/form/tmpl/bootstrap_tabs/default.php
@@ -66,14 +66,23 @@
 <?php
 $i = 0;
 $tabs = array();
+$is_err = false;
 
 foreach ($this->groups as $group) :
+	foreach ($group->elements as $element) {
+		if ($element->error != '') {
+			$is_err = true;
+			break;
+		}
+	}
+	$err_class = $is_err ? 'fabrikErrorGroup' : '';
 	$tabId = $this->form->id . '_' . (int)$this->rowid . '_' . $i;
 	// If this is multi-page then groups are consolidated until a group with a page break
 	// So we should only show a tab if: it is first tab, or if it is a page break
 	if (!$model->isMultiPage() || $i === 0 || $group->splitPage) :
+		$is_err = false;
 		$tab = new stdClass;
-		$tab->class = $i === 0 ? 'active' : '';
+		$tab->class = $i === 0 ? 'active ' . $err_class : $err_class;
 		$tab->css = $group->css;
 		$tab->href = 'group-tab' . $tabId;
 		$tab->id = 'group' . $group->id . '_tab';

diff --git a/components/com_fabrik/views/form/tmpl/bootstrap_tabs/template_css.php b/components/com_fabrik/views/form/tmpl/bootstrap_tabs/template_css.php
@@ -16,5 +16,27 @@
 .fabrikGroup {
 clear: left;
 }
+
+/* color & highlight group with validation errors */
+.fabrikErrorGroup a {
+    background-color: rgb(242, 222, 222) !important;
+  color: #b94a48;
+}
+ 
+.active.fabrikErrorGroup a,
+.active.fabrikErrorGroup a:hover,
+.active.fabrikErrorGroup a:focus {
+    border: 1px solid #b94a48 !important;
+    border-bottom-color: transparent !important;
+  color: #b94a48 !important;
+  background-color: rgb(255, 255, 255) !important;
+}
+ 
+.fabrikErrorGroup a:hover,
+.fabrikErrorGroup a:focus {
+    background-color: rgb(222, 173, 173) !important;
+  color: #b94a48;
+}
+
 ";
 ?>
diff --git a/media/com_fabrik/js/dist/element.js b/media/com_fabrik/js/dist/element.js
diff --git a/media/com_fabrik/js/dist/form.js b/media/com_fabrik/js/dist/form.js
diff --git a/media/com_fabrik/js/element.js b/media/com_fabrik/js/element.js
@@ -648,6 +648,14 @@ define(['jquery'], function (jQuery) {
                         }
                     }
 
+                    var tabDiv = this.getTabDiv();
+                    if (tabDiv) {
+                        var tab = this.getTab(tabDiv);
+                        if (tab) {
+                            tab.addClass('fabrikErrorGroup');
+                        }
+                    }
+
                     break;
                 case 'fabrikSuccess':
                     container.addClass('success').removeClass('info').removeClass('error');
@@ -888,6 +896,29 @@ define(['jquery'], function (jQuery) {
             }.bind(this)).delay(500);
         },
 
+        getTab: function(tab_div) {
+            var tab_dl;
+	        if (Fabrik.bootstrapped) {
+		        var a = jQuery('a[href$=#' + tab_div.id + ']');
+		        tab_dl = a.closest('[data-role=fabrik_tab]');
+	        } else {
+		        tab_dl = tab_div.getPrevious('.tabs');
+	        }
+	        if (tab_dl) {
+	            return tab_dl;
+            }
+            return false;
+        },
+
+        getTabDiv: function() {
+	        var c = Fabrik.bootstrapped ? '.tab-pane' : '.current';
+	        var tab_div = this.element.getParent(c);
+	        if (tab_div) {
+	            return tab_div;
+            }
+            return false;
+        },
+
         /**
          * Tabs mess with element positioning - some element (googlemaps, file upload) need to redraw themselves
          * when the tab is clicked

diff --git a/media/com_fabrik/js/form.js b/media/com_fabrik/js/form.js
@@ -1401,6 +1401,7 @@ define(['jquery', 'fab/encoder', 'fab/fabrik', 'lib/debounce/jquery.ba-throttle-
                                     return;
                                 }
                                 // Process errors if there are some
+	                            jQuery(this.form.getElements('[data-role=fabrik_tab]')).removeClass('fabrikErrorGroup')
                                 var errfound = false;
                                 if (json.errors !== undefined) {