Improvements to inputfields.js front-end management of Inputfields, including a few new API methods and it now opens/collapses Inputfields in the same row together as a group.

wire/templates-admin/scripts/inputfields.js

@@ -142,6 +142,12 @@ var Inputfields = {
 	 */
 	processingIfs: false,
 
+	/**
+	 * Are we currently toggling collapsed state or visibility?
+	 * 
+ 	 */	
+	toggling: false, 
+
 	/**
 	 * Default duration (in MS) for certain visual animations
 	 * 
@@ -178,16 +184,33 @@ var Inputfields = {
 		var $header = $inputfield.children('.InputfieldHeader, .ui-widget-header');
 		var $content = $inputfield.children('.InputfieldContent, .ui-widget-content');
 		var $toggleIcon = $header.find('.toggle-icon');
-		var isCollapsed = $inputfield.hasClass("InputfieldStateCollapsed");
+		var isCollapsed = $inputfield.hasClass('InputfieldStateCollapsed');
+		var isAjax = $inputfield.hasClass('collapsed10') || $inputfield.hasClass('collapsed11');
 		var Inputfields = this;
+		var $siblings = null;
 
 		if($inputfield.hasClass('InputfieldAjaxLoading')) return $inputfield;
 		if($inputfield.hasClass('InputfieldStateToggling')) return $inputfield;
+		
+		if(!isAjax && !this.toggling && $inputfield.hasClass('InputfieldColumnWidth')) {
+			var $siblings = Inputfields.getAllInRow($inputfield);
+			if($siblings.length < 2) $siblings = null;
+		}
 
 		if(typeof open == "undefined" || open === null) open = isCollapsed;
 		if(typeof duration == "undefined") duration = this.defaultDuration;
 
 		function completed() {
+			if(Inputfields.toggling === $inputfield.prop('id')) {
+				if($siblings && $siblings.length) {
+					//Inputfields.toggle($siblings, open, duration, callback);
+					$siblings.each(function() {
+						Inputfields.toggle(jQuery(this), open, 0);
+					});
+				}
+				setTimeout(function() { Inputfields.toggling = false; }, 100);
+				$siblings = null;
+			}
 			if(typeof callback != "undefined") callback($inputfield, open, duration);
 		}
 
@@ -206,7 +229,7 @@ var Inputfields = {
 			if($inputfield.hasClass('InputfieldColumnWidth')) {
 				$inputfield.children('.InputfieldContent').show();
 			}
-			if(!$inputfield.hasClass('InputfieldNoFocus')) {
+			if($inputfield.prop('id') === Inputfields.toggling && !$inputfield.hasClass('InputfieldNoFocus')) {
 				Inputfields.focus($inputfield);
 			}
 			toggled();
@@ -254,10 +277,12 @@ var Inputfields = {
 		}
 
 		// if ajax loaded, force InputfieldStates() click handler to open this one
-		if(isCollapsed && ($inputfield.hasClass('collapsed10') || $inputfield.hasClass('collapsed11'))) {
+		if(isCollapsed && isAjax) {
 			$toggleIcon.click();
 			return $inputfield;
 		}
+	
+		if(!this.toggling) this.toggling = $inputfield.prop('id');
 
 		// handle either open or close
 		if(open && isCollapsed) {
@@ -795,7 +820,72 @@ var Inputfields = {
 			// some other action we do not recognize
 		}
 	},
+
+	/**
+	 * Get first Inputfield in row that $inputfield appears in 
+	 * 
+	 * @param $inputfield
+	 * @returns object
+	 * @since 3.0.170
+	 * 
+	 */
+	getFirstInRow: function($inputfield) {
+		$inputfield = this.inputfield($inputfield);
+		if(!$inputfield.length) return $inputfield;
+		if(!$inputfield.hasClass('InputfieldColumnWidth')) return $inputfield;
+		if($inputfield.hasClass('InputfieldColumnWidthFirst')) return $inputfield;
+		var $col = $inputfield;
+		do {
+			$col = $col.prev('.Inputfield');
+			if($col.hasClass('InputfieldColumnWidthFirst')) break; // found it
+		} while($col.length && $col.hasClass('InputfieldColumnWidth'));
+		return $col.hasClass('InputfieldColumnWidthFirst') ? $col : $inputfield;
+	},
 	
+	/**
+	 * Get all siblings of $inputfield in an InputfieldColumnWidth width row
+	 * 
+ 	 * @param $inputfield
+	 * @param bool andSelf Specify true to also include $inputfield, or omit argument to exclude $inputfield (default=false)
+	 * @param bool andHidden Include hidden inputfields also? (default=false)
+	 * @returns object
+	 * @since 3.0.170
+	 * 
+	 */	
+	getSiblingsInRow: function($inputfield, andSelf, andHidden) {
+		$inputfield = this.inputfield($inputfield);
+		if(!$inputfield.length) return $inputfield;
+		if(typeof andSelf === "undefined") andSelf = false;
+		if(typeof andHidden === "undefined") andHidden = false;
+		var pct = this.columnWidth($inputfield);
+		if(pct < 1 || pct > 99) return jQuery([]); 
+		var $col = this.getFirstInRow($inputfield);
+		var sel = '';
+		while($col.length) {
+			if($col.hasClass('InputfieldStateHidden') && !andHidden) {
+				// skip hidden inputfield
+			} else if(andSelf || $col.prop('id') !== $inputfield.prop('id')) {
+				// add inputfield
+				sel += (sel.length ? ',' : '') + '#' + $col.prop('id');
+			}
+			$col = $col.next('.InputfieldColumnWidth');
+			if($col.hasClass('InputfieldColumnWidthFirst')) break;
+		}
+		return sel.length ? jQuery(sel) : $inputfield;	
+	},
+
+	/**
+	 * Get all Inputfields in row occupied by given $inputfield
+	 * 
+ 	 * @param $inputfield
+	 * @returns object
+	 * @since 3.0.170
+	 * 
+	 */	
+	getAllInRow: function($inputfield, andHidden) {
+		if(typeof andHidden === "undefined") andHidden = false;
+		return this.getSiblingsInRow($inputfield, true, andHidden);
+	}
 	
 };