ENHANCEMENT: Refactored ToggleCompositeField.

* Use jquery ui accordion for the field, and implemented an admin theme.
* Made the setting of configuration consistent with other form fields.
* ToggleComposteField->startClosed() has been deprecated in favour of
  setStartClosed().
* Removed public access to the heading level, instead use getHeadingLevel()
  or setHeadingLevel().

admin/scss/_forms.scss

@@ -429,6 +429,35 @@ form.small .field, .field.small {
 		}
 	}
 }
+
+.ss-toggle {
+	margin-bottom: $grid-y;
+
+	.ui-accordion-header {
+		font-weight: bold;
+
+		&.ui-state-default {
+			@include background-image(
+				linear-gradient(lighten($color-shadow-light, 15%), $color-shadow-light)
+			);
+			text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+		}
+	}
+
+	.ui-accordion-content {
+		padding: $grid-y*2 0 $grid-y 0;
+
+		.field {
+			@include box-shadow(none);
+			padding-left: $grid-x*2;
+			padding-right: $grid-x*2;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
 /** ----------------------------------------------------
  * Checkbox Field
  * ---------------------------------------------------- */

admin/scss/_uitheme.scss

@@ -109,10 +109,15 @@
 		font-size: $font-base-size;
 		font-family: $font-family;
 	}
-
-	.ss-ui-button,
-	.ui-widget-content .ss-ui-button,
-	.ui-widget-header .ss-ui-button {
 
+	.ui-accordion {
+		.ui-accordion-header {
+			border-color: $color-button-generic-border;
+			margin-bottom: 0;
+		}
+		.ui-accordion-content {
+			border: 1px solid $color-button-generic-border;
+			border-top: none;
+		}
 	}
 }

forms/ToggleCompositeField.php

@@ -1,54 +1,94 @@
 <?php
 /**
- * Allows visibility of a group of fields to be toggled using '+' and '-' icons
+ * Allows visibility of a group of fields to be toggled.
  *
  * @package forms
  * @subpackage fields-structural
  */
 class ToggleCompositeField extends CompositeField {
-
+
+	/**
+	 * @var bool
+	 */
+	protected $startClosed = true;
+
 	/**
-	 * @var $headingLevel int
+	 * @var $int
 	 */
-	public $headingLevel = 2;
-	
-	function __construct($name, $title, $children) {
+	protected $headingLevel = 3;
+
+	public function __construct($name, $title, $children) {
 		$this->name = $name;
 		$this->title = $title;
 
-		$this->startClosed(true);
-
 		parent::__construct($children);
 	}
-	
+
 	public function FieldHolder($properties = array()) {
-		Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/prototype/prototype.js");
-		Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/behaviour/behaviour.js");
-		Requirements::javascript(FRAMEWORK_DIR . "/javascript/ToggleCompositeField.js");
-
+		Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery/jquery.js');
+		Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-ui/jquery-ui.js');
+		Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
+		Requirements::javascript(FRAMEWORK_DIR . '/javascript/ToggleCompositeField.js');
+		Requirements::css(FRAMEWORK_DIR . '/thirdparty/jquery-ui-themes/smoothness/jquery.ui.css');
+
 		$obj = $properties ? $this->customise($properties) : $this;
-
 		return $obj->renderWith($this->getTemplates());
-	}	
-
+	}
+
+	public function getAttributes() {
+		if($this->getStartClosed()) {
+			$class = 'ss-toggle ss-toggle-start-closed';
+		} else {
+			$class = 'ss-toggle';
+		}
+
+		return array_merge(
+			$this->attributes,
+			array(
+				'id'    => $this->id(),
+				'class' => $class . ' ' . $this->extraClass()
+			)
+		);
+	}
+
 	/**
-	 * Determines if the field should render open or closed by default.
-	 * 
-	 * @param boolean
+	 * @return bool
 	 */
-	public function startClosed($bool) {
-		($bool) ? $this->addExtraClass('startClosed') : $this->removeExtraClass('startClosed');
+	public function getStartClosed() {
+		return $this->startClosed;
 	}
-	
+
 	/**
-	 * @return string
+	 * Controls whether the field is open or closed by default. By default the
+	 * field is closed.
+	 *
+	 * @param bool $bool
 	 */
-	public function HeadingLevel() {
+	public function setStartClosed($bool) {
+		$this->startClosed = (bool) $bool;
+	}
+
+	/**
+	 * @return int
+	 */
+	public function getHeadingLevel() {
 		return $this->headingLevel;
 	}
 
-	public function Type() {
-		return ' toggleCompositeField';
+	/**
+	 * @param int $level
+	 */
+	public function setHeadingLevel($level) {
+		$this->headingLevel = $level;
 	}
+
+	/**
+	 * @deprecated 3.0
+	 */
+	public function startClosed($bool) {
+		Deprecation::notice('3.0', 'Please use ToggleCompositeField->setStartClosed()');
+		$this->setStartClosed($bool);
+	}
+
 }
 

javascript/ToggleCompositeField.js

@@ -1,29 +1,26 @@
-// Shortcut-function (until we update to Prototye v1.5)
-if(typeof $$ != "Function") $$ = document.getElementsBySelector;
+(function($){
+	$.entwine('ss', function($){
+		$('.ss-toggle').entwine({
+			onmatch: function() {
+				var self = $(this);
+				var opts = { collapsible: true };
+				var tab  = self.parents(".ss-tabset");
 
-var ToggleCompositeField = Class.create();
-ToggleCompositeField.prototype = {
-	initialize: function() {
-		var rules = {};
-		rules['#' + this.id + ' .trigger'] = {
-			onclick: function(e) {
-				this.toggle();
-				Event.stop(e); return false;
-			}.bind(this)
-		};
-		Behaviour.register(rules);
-
-		// close content by default
-		if(Element.hasClassName(this, 'startClosed')) {
-			Element.toggle($$('#' + this.id + ' .contentMore')[0]);
-		}
-		Element.toggle($$('#' + this.id + ' .triggerClosed')[0]);
-	},
-
-	toggle: function() {
-		Element.toggle($$('#' + this.id + ' .contentMore')[0]);
-		Element.toggle($$('#' + this.id + ' .triggerClosed')[0]);
-		Element.toggle($$('#' + this.id + ' .triggerOpened')[0]);
-	}
-}
-ToggleCompositeField.applyTo('div.toggleCompositeField');
+				if(self.hasClass("ss-toggle-start-closed")) {
+					opts.active = false;
+				}
+
+				if(tab.length) {
+					tab.bind("tabsshow", function() {
+						self.accordion("resize");
+					});
+				}
+
+				this.accordion(opts);
+			},
+			onunmatch: function() {
+				this._super();
+			}
+		});
+	});
+})(jQuery);

templates/forms/ToggleCompositeField.ss

@@ -1,12 +1,8 @@
-<div id="$Name" class="$Type $extraClass">	
-	<h$HeadingLevel style="cursor: pointer;" class="trigger$ClosedClass">
-		<img class="triggerClosed" src="$ModulePath(framework)/images/toggle-closed.gif" alt="+" style="display:none;" title="<% _t('SHOW', 'Show') %>" />
-		<img class="triggerOpened" src="$ModulePath(framework)/images/toggle-open.gif" alt="-" style="display:none;" title="<% _t('HIDE', 'Hide') %>" /> 
-		$Title
-	</h$HeadingLevel>
-	<div class="contentMore">
-	<% loop $FieldList %>
-		$FieldHolder
-	<% end_loop %>
+<div $AttributesHTML>
+	<h$HeadingLevel><a href="#">$Title</a></h$HeadingLevel>
+	<div>
+		<% loop $FieldList %>
+			$FieldHolder
+		<% end_loop %>
 	</div>
 </div>