API Update core templates for CompositeField / SelectionGroup.ss

silverstripe · Jul 28, 2016 · c556b01 · c556b01
1 parent 7a095b1
commit c556b01
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 52 deletions.
diff --git a/admin/themes/cms-forms/templates/forms/CompositeField.ss b/admin/themes/cms-forms/templates/forms/CompositeField.ss
@@ -0,0 +1,6 @@
+<% if $Tag == 'fieldset' && $Legend %>
+	<legend>$Legend</legend>
+<% end_if %>
+<% loop $FieldList %>
+	$FieldHolder
+<% end_loop %>
diff --git a/admin/themes/cms-forms/templates/forms/CompositeField_holder.ss b/admin/themes/cms-forms/templates/forms/CompositeField_holder.ss
@@ -0,0 +1,17 @@
+<div id="$HolderID" class="form-group field<% if $extraClass %> $extraClass<% end_if %>">
+    <% if $Title %>
+    	<label for="$ID" id="title-$ID" class="form__field-label">$Title</label>
+    <% end_if %>
+	<$Tag id="$ID" <% include AriaAttributes %>
+		class="form__fieldgroup form__field-holder
+			<% if not $Title %> form__field-holder--no-label<% end_if %>
+			<% if $Zebra %> form__fieldgroup-zebra<% end_if %>
+			<% if $extraClass %> $extraClass<% end_if %>"
+	>
+		$Field
+        <%-- TODO: change $MessageType to match Bootstraps alert types, e.g. alert-info, alert-danger etc --%>
+		<% if $Message %><p class="alert $MessageType" role="alert" id="message-$ID">$Message</p><% end_if %>
+        <% if $Description %><p class="form__field-description" id="describes-$ID">$Description</p><% end_if %>
+	</$Tag>
+    <% if $RightTitle %><p class="form__field-extra-label" id="extra-label-$ID">$RightTitle</p><% end_if %>
+</div>
diff --git a/admin/themes/cms-forms/templates/forms/CompositeField_holder_small.ss b/admin/themes/cms-forms/templates/forms/CompositeField_holder_small.ss
@@ -0,0 +1,17 @@
+<div id="$HolderID" class="form__fieldgroup-item field field--small<% if $extraClass %> $extraClass<% end_if %>">
+    <% if $Title %>
+		<label for="$ID" id="title-$ID" class="form__fieldgroup-label">$Title</label>
+	<% end_if %>
+	<$Tag id="$ID"
+		<% if $Title %>aria-labelledby="title-$ID"<% end_if %>
+		class="form__fieldgroup form__field-holder
+			<% if not $Title %> form__field-holder--no-label<% end_if %>
+			<% if $Zebra %> form__fieldgroup-zebra<% end_if %>
+			<% if $extraClass %> $extraClass<% end_if %>"
+	>
+		<%-- Note: _holder_small.ss overrides CompositeField.ss to force nested $SmallFieldHolder --%>
+		<% loop $FieldList %>
+			$SmallFieldHolder
+		<% end_loop %>
+	</$Tag>
+</div>
diff --git a/admin/themes/cms-forms/templates/forms/SelectionGroup.ss b/admin/themes/cms-forms/templates/forms/SelectionGroup.ss
@@ -1,21 +1,25 @@
-<div class="form-group selection-group">
-	<ul class="form__field-holder form__field-holder--no-label SelectionGroup<% if $extraClass %> $extraClass<% end_if %>">
-		<% if $IsReadonly %>
-			<% loop $FieldSet %>
-				<% if $Selected %>
-					<li class="selected selection-group__item">
-						$RadioLabel
-						$SmallFieldHolder
-					</li>
-				<% end_if %>
-			<% end_loop %>
-		<% else %>
-			<% loop $FieldSet %>
-				<li class="selection-group__item<% if $Selected %> selected<% end_if %>">
-					{$RadioButton}{$RadioLabel}
-					$SmallFieldHolder
+<ul>
+	<% if $IsReadonly %>
+		<% loop $FieldSet %>
+			<% if $Selected %>
+				<li class="selected selection-group__item">
+					$RadioLabel
+					<%-- Bypass composite item field and directly render child fields --%>
+					<% loop $FieldList %>
+						$Field
+					<% end_loop %>
 				</li>
-			<% end_loop %>
-		<% end_if %>
-	</ul>
-</div>
+			<% end_if %>
+		<% end_loop %>
+	<% else %>
+		<% loop $FieldSet %>
+			<li class="selection-group__item<% if $Selected %> selected<% end_if %>">
+				{$RadioButton}{$RadioLabel}
+				<%-- Bypass composite item field and directly render child fields --%>
+				<% loop $FieldList %>
+					$Field
+				<% end_loop %>
+			</li>
+		<% end_loop %>
+	<% end_if %>
+</ul>
diff --git a/forms/SelectionGroup.php b/forms/SelectionGroup.php
@@ -82,6 +82,7 @@ public function FieldList() {
 			}
 
 			$itemID = $this->ID() . '_' . (++$count);
+			// @todo Move into SelectionGroup_Item.ss template at some point.
 			$extra = array(
 				"RadioButton" => DBField::create_field('HTMLFragment', FormField::create_tag(
 					'input',
@@ -91,12 +92,16 @@ public function FieldList() {
 						'id' => $itemID,
 						'name' => $this->name,
 						'value' => $item->getValue(),
-						'checked' => $checked
+						'checked' => $checked,
+						'aria-labelledby' => "title-{$itemID}",
 					)
 				)),
 				"RadioLabel" => DBField::create_field('HTMLFragment', FormField::create_tag(
 					'label',
-					array('for' => $itemID),
+					array(
+						'id' => "title-{$itemID}",
+						'for' => $itemID
+					),
 					$item->getTitle()
 				)),
 				"Selected" => $firstSelected,
@@ -116,9 +121,7 @@ public function FieldHolder($properties = array()) {
 		Requirements::javascript(FRAMEWORK_DIR   . '/client/dist/js/SelectionGroup.js');
 		Requirements::css(FRAMEWORK_DIR . '/client/dist/styles/SelectionGroup.css');
 
-		$obj = $properties ? $this->customise($properties) : $this;
-
-		return $obj->renderWith($this->getTemplates());
+		return parent::FieldHolder($properties);
 	}
 }
 

diff --git a/templates/forms/CompositeField.ss b/templates/forms/CompositeField.ss
@@ -1,15 +1,9 @@
-<$Tag class="CompositeField $extraClass <% if ColumnCount %>multicolumn<% end_if %>">
-	<% if $Tag == 'fieldset' && $Legend %>
-		<legend>$Legend</legend>
-	<% end_if %>
-
-	<% loop $FieldList %>
-		<% if $ColumnCount %>
-			<div class="column-{$ColumnCount} $FirstLast">
-				$Field
-			</div>
-		<% else %>
+<% loop $FieldList %>
+	<% if $ColumnCount %>
+		<div class="column-{$ColumnCount} $FirstLast">
 			$Field
-		<% end_if %>
-	<% end_loop %>
-</$Tag>
+		</div>
+	<% else %>
+		$Field
+	<% end_if %>
+<% end_loop %>
diff --git a/templates/forms/CompositeField_holder.ss b/templates/forms/CompositeField_holder.ss
@@ -1,17 +1,7 @@
-<$Tag class="CompositeField $extraClass <% if ColumnCount %>multicolumn<% end_if %>" id="$HolderID">
+<$Tag class="CompositeField $extraClass <% if $ColumnCount %>multicolumn<% end_if %>" id="$HolderID">
 	<% if $Tag == 'fieldset' && $Legend %>
 		<legend>$Legend</legend>
 	<% end_if %>
 
-	<% loop $FieldList %>
-		<% if $ColumnCount %>
-			<div class="column-{$ColumnCount} $FirstLast">
-				$FieldHolder
-			</div>
-		<% else %>
-			$FieldHolder
-		<% end_if %>
-	<% end_loop %>
-
-	<% if $Description %><span class="description">$Description</span><% end_if %>
+	$Field
 </$Tag>
diff --git a/templates/forms/CompositeField_holder_small.ss b/templates/forms/CompositeField_holder_small.ss
@@ -1,4 +1,4 @@
-<$Tag class="CompositeField $extraClass <% if $ColumnCount %>multicolumn<% end_if %>">
+<$Tag class="CompositeField $extraClass <% if $ColumnCount %>multicolumn<% end_if %>" id="$HolderID">
 	<% if $Tag == 'fieldset' && $Legend %>
 		<legend>$Legend</legend>
 	<% end_if %>