Upgrade asmSelect to support fieldsets natively, rather than having it bolted on separately by ProcessTemplate

wire/modules/Fieldtype/FieldtypeRepeater/config.php

@@ -77,6 +77,7 @@ class FieldtypeRepeaterConfigHelper extends Wire {
 		$select->attr('id', 'repeaterFields');
 		$select->attr('title', $this->_('Add Field'));
 		$select->setAsmSelectOption('sortable', true);
+		$select->setAsmSelectOption('fieldset', true);
 		$select->setAsmSelectOption('editLink', $this->wire('config')->urls->admin . "setup/field/edit?id={value}&fieldgroup_id={$template->fieldgroup->id}&modal=1&process_template=1");
 		$select->setAsmSelectOption('hideDeleted', false);
 

wire/modules/Inputfield/InputfieldAsmSelect/InputfieldAsmSelect.module

@@ -13,7 +13,7 @@ class InputfieldAsmSelect extends InputfieldSelectMultiple implements Inputfield
 	public static function getModuleInfo() {
 		return array(
 			'title' => __('asmSelect', __FILE__),
-			'version' => 120,
+			'version' => 121,
 			'summary' => __('Multiple selection, progressive enhancement to select multiple', __FILE__), // Module Summary
 			'permanent' => true, 
 			);
@@ -32,7 +32,8 @@ class InputfieldAsmSelect extends InputfieldSelectMultiple implements Inputfield
 
 		parent::init(); 
 
-		$this->setAsmSelectOption('sortable', true); 
+		$this->setAsmSelectOption('sortable', true);
+		$this->setAsmSelectOption('fieldset', false); 
 
 		// an optional edit or detail link where items can be modified or viewed
 		// i.e. /path/to/page/?id={value} where {value} is replaced with option value

wire/modules/Inputfield/InputfieldAsmSelect/asmselect/jquery.asmselect.css

@@ -130,3 +130,16 @@ span.asmListItemDesc {
 .asmListItemDeleted span {
 	text-decoration: line-through; 
 }
+
+span.asmFieldsetIndent {
+	float: left;
+	width: 15px;
+	height: 5px;
+}
+
+.asmFieldset, 
+.pw-content .asmFieldset,
+#content .asmFieldset {
+	font-weight: bold;
+}
+

wire/modules/Inputfield/InputfieldAsmSelect/asmselect/jquery.asmselect.js

@@ -17,6 +17,7 @@
 			listType: 'ol',						// Ordered list 'ol', or unordered list 'ul'
 			sortable: false, 					// Should the list be sortable?
 			highlight: false,					// Use the highlight feature? 
+			fieldset: false,					// Use fieldset support? (for PW Fieldset types)
 			animate: false,						// Animate the the adding/removing of items in the list?
 			addItemTarget: 'bottom',				// Where to place new selected items in list: top or bottom
 			hideWhenAdded: false,					// Hide the option when added to the list? works only in FF
@@ -68,6 +69,7 @@
 			var buildingSelect = false; 				// is the new select being constructed right now?
 			var ieClick = false;					// in IE, has a click event occurred? ignore if not
 			var ignoreOriginalChangeEvent = false;			// originalChangeEvent bypassed when this is true
+			var fieldsetCloseItems = {};
 			var msie = 0; 
 
 			function init() {
@@ -75,7 +77,7 @@
 				// initialize the alternate select multiple
 
 				// this loop ensures uniqueness, in case of existing asmSelects placed by ajax (1.0.3)
-				while($("#" + options.containerClass + index).size() > 0) index++; 
+				while($("#" + options.containerClass + index).length > 0) index++; 
 
 				$select = $("<select></select>")
 					.addClass(options.selectClass)
@@ -108,9 +110,19 @@
 				}
 
 				if(msie > 0 && msie < 8) $ol.css('display', 'inline-block'); // Thanks Matthew Hutton
+				
+				if(options.fieldset) {
+					setupFieldsets();
+					$original.children('option').each(function() {
+						var name = $(this).text();
+						if(name.indexOf('_END') > 0 && name.substring(name.length - 4) == '_END') {
+							fieldsetCloseItems[name] = $(this);
+						}
+					});
+				}
 
 				$original.trigger('init'); 
-			
+				
 				if(options.editLinkModal === 'longclick') {
 					$ol.on('longclick', 'a.asmEditLinkModalLongclick', clickEditLink);
 				}
@@ -120,6 +132,8 @@
 
 				// make any items in the selected list sortable
 				// requires jQuery UI sortables, draggables, droppables
+				
+				var fieldsetItems = [];
 
 				$ol.sortable({
 					items: 'li.' + options.listItemClass,
@@ -133,26 +147,41 @@
 						updatedOptionId = $option.attr('id'); 
 
 						$(this).children("li").each(function(n) {
-
 							$option = $('#' + $(this).attr('rel')); 
 							$original.append($option); 
-
-							/* this doesn't seem to work in newer versions of jquery
-							if($(this).is(".ui-sortable-helper")) {
-								updatedOptionId = $option.attr('id'); 
-								return;
-							}
-							*/
-
 						}); 
 
 						if(updatedOptionId) triggerOriginalChange(updatedOptionId, 'sort'); 
 					},
 					start: function(e, data) {
 						if(options.jQueryUI) data.item.addClass('ui-state-highlight'); 
+						if(data.item.hasClass('asmFieldsetStart')) {
+							var $next = data.item;
+							var stopName = data.item.find('.asmListItemLabel').text() + '_END';
+							do {
+								if($next.find('.asmListItemLabel').text() == stopName) break;
+								$next = $next.next('li');
+								if($next.length && !$next.hasClass('ui-sortable-placeholder')) {
+									$next.fadeTo(50, 0.7).slideUp('fast');
+									fieldsetItems.push($next); 
+								}
+							} while($next.length);
+						}
 					},
 					stop: function(e, data) {
 						if(options.jQueryUI) data.item.removeClass('ui-state-highlight'); 
+						if(data.item.hasClass('asmFieldsetStart')) {
+							var $lastItem = data.item;
+							
+							for(var n = 0; n < fieldsetItems.length; n++) {
+								var $item = fieldsetItems[n];
+								$lastItem.after($item); 
+								$lastItem = $item;
+								$item.slideDown('fast').fadeTo('fast', 1.0); 
+							}
+							fieldsetItems = [];
+						}
+						setupFieldsets();
 					}
 
 				}).addClass(options.listSortableClass); 
@@ -198,6 +227,8 @@
 				if(typeof $.browser != "undefined") {
 					if ($.browser.opera) $ol.hide().fadeIn("fast");
 				}
+				
+				if(options.fieldset) setupFieldsets();
 			}
 
 			function buildSelect() {
@@ -275,7 +306,7 @@
 					.attr("disabled", true);
 
 				if(options.hideWhenEmpty) {
-					if($option.siblings('[disabled!=true]').size() < 2) $select.hide();
+					if($option.siblings('[disabled!=true]').length < 2) $select.hide();
 				}
 
 				if(options.hideWhenAdded) $option.hide();
@@ -297,7 +328,6 @@
 			function addListItem(optionId) {
 
 				// add a new item to the html list
-
 				var $O = $('#' + optionId); 
 
 				if(!$O) return; // this is the first item, selectLabel
@@ -400,6 +430,18 @@
 					setHighlight($item, options.highlightAddedLabel); 
 					selectFirstItem();
 					if(options.sortable) $ol.sortable("refresh"); 	
+					if(options.fieldset) {
+						var itemName = $O.text();
+						if(itemName.indexOf('_END') > 0 && itemName.substring(itemName.length - 4) == '_END') {
+							$item.addClass('asmFieldset asmFieldsetEnd'); 
+						} else {
+							var fieldsetCloseName = itemName + '_END';
+							if(typeof fieldsetCloseItems[fieldsetCloseName] != "undefined") {
+								$item.addClass('asmFieldset asmFieldsetStart');
+								addListItem(fieldsetCloseItems[fieldsetCloseName].attr('id'));
+							}
+						}
+					}
 				}
 
 			}
@@ -571,16 +613,16 @@
 										$asmItem.effect('highlight', {}, 500); 
 										
 										var $asmSetStatus = $icontents.find('#' + options.listItemStatusClass); // first try to find by ID
-										if($asmSetStatus.size() == 0) $asmSetStatus = $icontents.find(':input.' + options.listItemStatusClass); // then by class, if not ID
-										if($asmSetStatus.size() > 0) $asmItem.find('.' + options.listItemStatusClass).html($asmSetStatus.eq(0).val());
+										if($asmSetStatus.length == 0) $asmSetStatus = $icontents.find(':input.' + options.listItemStatusClass); // then by class, if not ID
+										if($asmSetStatus.length > 0) $asmItem.find('.' + options.listItemStatusClass).html($asmSetStatus.eq(0).val());
 										
 										var $asmSetDesc = $icontents.find('#' + options.listItemDescClass); // first try to find by ID
-										if($asmSetDesc.size() == 0) $asmSetDesc = $icontents.find(':input.' + options.listItemDescClass); // then by class, if not ID
-										if($asmSetDesc.size() > 0) {
+										if($asmSetDesc.length == 0) $asmSetDesc = $icontents.find(':input.' + options.listItemDescClass); // then by class, if not ID
+										if($asmSetDesc.length > 0) {
 											$asmSetDesc = $asmSetDesc.eq(0); 
 											var $desc = $asmItem.find('.' + options.listItemDescClass);
 											var $descA = $desc.find('a'); // does it have an <a> in there?
-											if($descA.size() > 0) $descA.html($asmSetDesc.val()); 
+											if($descA.length > 0) $descA.html($asmSetDesc.val()); 
 												else $desc.html($asmSetDesc.val());
 										}
 									}
@@ -595,6 +637,31 @@
 				}); 
 				return false; 
 			}
+			
+			function setupFieldsets() {
+				$ol.find('span.asmFieldsetIndent').remove();
+				var $items = $ol.children('li');
+			
+				$ol.children('li').children('span.asmListItemLabel').each(function() {
+					var $t = $(this);
+					var label = $t.text();
+					if(label.substring(label.length-4) != '_END') return;
+					label = label.substring(0, label.length-4);
+					var $li = $(this).closest('li.asmListItem');
+					$li.addClass('asmFieldset asmFieldsetEnd');
+					while(1) {
+						$li = $li.prev('li.asmListItem');
+						if($li.length < 1) break;
+						var $span = $li.children('span.asmListItemLabel'); 
+						var label2 = $span.text();
+						if(label2 == label) {
+							$li.addClass('asmFieldset asmFieldsetStart');
+							break;
+						}
+						$span.prepend($('<span class="asmFieldsetIndent"></span>'));
+					}
+				});
+			}
 
 			init();
 		});