[Proposal] Multiple Fieldsets of Type Tab per Form

[marcus-at-localhost]

Right now the formbuilder will collect all fieldset.tab legend to build tabs in one place.
You can't have multiple sections of fieldset.tab across the form.

The problem was described here: https://forum.getfuelcms.com/discussion/2345/form-tabs-fieldsets/p1 with no solution.

The way fieldset.tab works is, every form field that comes after 'a' => ['type' => 'fieldset', 'class' => 'tab', 'label' => 'a'], is going to end up in a tab, even if you setup a non tab fieldset section 'k' => ['type' => 'fieldset', 'label' => 'Break out tabs'], and then more fieldsets with tabs (x and y).

All tabs will end up at the top of the form or better the first defined fieldset.tab.

'a' => ['type' => 'fieldset', 'class' => 'tab', 'label' => 'a'],
// ... some fields
'b' => ['type' => 'fieldset', 'class' => 'tab', 'label' => 'b'],
// some fields

'k' => ['type' => 'fieldset', 'label' => 'Break out tabs'],
// some more fields unrelated to fieldset b 

'x' => ['type' => 'fieldset', 'class' => 'tab', 'label' => 'x'],
// ... some fields
'y' => ['type' => 'fieldset', 'class' => 'tab', 'label' => 'y'],
// some fields

'z' => ['type' => 'fieldset', 'label' => 'Break out tabs'],
// some more fields unrelated to fieldset y 

Solution

In order to group fieldset.tab a and b in the beginning of the form and fieldset. x and y at the end I would propose the following change:

1. Update jQuery to the latest version of the 1.x branch at least to 1.8 because I use addBack() Added a check for addBack() #571 (comment)

2. replace in BaseFuelController.js the following function

	_initFormTabs : function(context){
		if (!$('.form_tabs', context).length){

			var tabId = 'tabs_' + jqx.config.uriPath.replace(/[\/|:]/g, '_').substr(5); // remove fuel_
			var tabCookieSettings = {group: this.uiCookie, name: tabId, params: {path: jqx.config.cookieDefaultPath}}

			var tabs = '<div id="fuel_form_tabs" class="form_tabs"><ul>';

			// Group
			$fieldsets = $('fieldset.tab', context).not('fieldset.tab fieldset', context);

			if(!$.fn.addBack){
				$.fn.addBack = $.fn.andSelf;
			}

			$fieldsets.each(function() {
				if ( ! $(this).closest('.fieldset-grouped').length){
					$(this).nextUntil('fieldset:not([class])').addBack().wrapAll("<div class='fieldset-grouped' />");
				}
			});
			
			// loop through groups and create tabs from <legend>
			$('.fieldset-grouped').each(function(idx, context){
				// in order to change as little as possible from the original code, I keep context as variable, but it's the current context of .fielset-grouped!

				tabs = '<div id="fuel_form_tabs_' + idx + '" class="form_tabs"><ul>'

				// prevent nested fieldsets from showing up with not()
				$legends = $('fieldset.tab legend', context).not('fieldset.tab fieldset legend', context);
				$legends.each(function(i){
					if ($(this).parent().attr('id') != '') {
						$(this).parent().attr('id', 'fieldset' + i + '_' + idx).attr('data-index', i + '_' + idx);
					}
					var id = ($(this).parent().attr('id'));
					var text = $(this).text();
					tabs += '<li id="fueltab' + i + '_' + idx + '"><a href="#' + id + '">' + text + '</a></li>';
				});
				$legends.hide();
				tabs += '</ul><div class="clear"></div></div>';

				var startIndex = parseInt($.supercookie(tabCookieSettings.group, tabCookieSettings.name));
				if (!startIndex) startIndex = 0;
				tabs += '<input type="hidden" name="__fuel_selected_tab__" id="__fuel_selected_tab__" value="' + startIndex + '" />';
				$legends.filter(':first').parent().before(tabs);

				$('#form').trigger('fuel_form_tabs_loaded', [$('#fuel_form_tabs_' + idx)] );

				$tabs = $('.form_tabs ul', context);
				$tabs.simpleTab({cookie: tabCookieSettings});

				var tabCallback = function(e, index, selected, content, settings){
					$('#__fuel_selected_tab__').val(index);
				}
				$tabs.bind('tabClicked', tabCallback);

				// check if there are any errors and highlight them
				$legends.parent().find('.error_highlight').each(function(i){
					var fieldsetIndex = $(this).closest('fieldset').data('index');
					$('#fueltab' + fieldsetIndex).addClass('taberror');
				})

			});
		}
	},

I did not create a pull request, because at this point I would like to have the devs to look over this and decide if this is a good way to implement and if a jquery update is possible and mybe they will notice some side effects.

And if it ends up in Fuel (which would be nice), it needs to be documented and made clear, that once you use fieldset.tab you need to use blank fieldset to break out of tabs. Which might not be very intuitive.

It would be great if this ended up working in Fuel CMS

[daylightstudio]

Thanks for the proposal and detailed explanation. Why don't you go ahead and create a pull request that I can pull from to test out and see if jquery 1.8 breaks anything.

[marcus-at-localhost]

@daylightstudio I'm happy to do that. I just found that with the update of jquery, an update of jquery UI is needed as well (error is related to a depreciated function in jq that jqui is relying on => https://www.drupal.org/project/jquery_update/issues/2223083) a quick test with the latest jquery ui (1.12) fixed the error, but who knows where else it rips a hole ^^

Edit: instead of messing with an update of jq and jqui I added a jquery versioncheck to make it futureproof.