Skip to content
This repository
Browse code

ENHANCEMENT: move hard coded template HTML for composite field and fi…

…eld group out to separate template files.
  • Loading branch information...
commit 907568b1827abcc2f25cd38a2b90a80ac7a7bb66 1 parent 3572b31
Will Rossiter authored April 14, 2012
4  admin/css/screen.css
@@ -197,7 +197,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
197 197
 .cms .ss-ui-loading-icon { background: url(../../images/network-save.gif) no-repeat; display: block; width: 16px; height: 16px; }
198 198
 
199 199
 /** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
200  
-.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; }
  200
+.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding: 8px 0 0 8px; }
201 201
 .fieldgroup .fieldgroup-field .field { border: none; padding-bottom: 0; }
202 202
 
203 203
 /** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */
@@ -353,7 +353,7 @@ body.cms { overflow: hidden; }
353 353
 /* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */
354 354
 .cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; }
355 355
 .cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); }
356  
-.cms-content-tools .cms-panel-content { width: 176px; padding: 8px 8px; overflow: auto; height: 100%; }
  356
+.cms-content-tools .cms-panel-content { width: 176px; padding: 0 8px; overflow: auto; height: 100%; }
357 357
 .cms-content-tools .cms-panel-content .dropdown select { width: 160px; }
358 358
 .cms-content-tools .cms-panel-content #LastEditedFrom { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
359 359
 .cms-content-tools .cms-panel-content #LastEditedFrom input { width: 160px; }
2  admin/scss/_forms.scss
@@ -406,7 +406,7 @@ form.small .field, .field.small {
406 406
 		float: left;
407 407
 		display: block;
408 408
 		width: $grid-x * 23;
409  
-		padding-right: $grid-x;
  409
+		padding: $grid-y 0 0 $grid-x;
410 410
 
411 411
 		&.odd {
412 412
 			
4  admin/scss/_style.scss
@@ -610,8 +610,8 @@ body.cms {
610 610
 	}
611 611
 	
612 612
 	.cms-panel-content {
613  
-		width: $grid-x * 22;
614  
-		padding: $grid-y $grid-x;
  613
+		width: ($grid-x * 22);
  614
+		padding: 0 $grid-x;
615 615
 		overflow: auto;
616 616
 		height:100%;
617 617
 		.dropdown select {
12  css/UnitTesting.css
@@ -8,17 +8,17 @@ table.details tr { background: #eeeee0; }
8 8
 
9 9
 p { line-height: 1.5em; margin-top: 0.5em; margin-bottom: 1.0em; }
10 10
 
11  
-h1 { margin: 0px 0px 5px; font: 165% verdana, arial, helvetica; }
  11
+h1 { margin: 0px 0px 5px; font: 165% verdana,arial,helvetica; }
12 12
 
13  
-h2 { margin-top: 1em; margin-bottom: 0.5em; font: bold 125% verdana, arial, helvetica; }
  13
+h2 { margin-top: 1em; margin-bottom: 0.5em; font: bold 125% verdana,arial,helvetica; }
14 14
 
15  
-h3 { margin-bottom: 0.5em; font: bold 115% verdana, arial, helvetica; }
  15
+h3 { margin-bottom: 0.5em; font: bold 115% verdana,arial,helvetica; }
16 16
 
17  
-h4 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
  17
+h4 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
18 18
 
19  
-h5 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
  19
+h5 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
20 20
 
21  
-h6 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
  21
+h6 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
22 22
 
23 23
 .Error { font-weight: bold; color: red; }
24 24
 
5  dev/SapphireTest.php
@@ -228,7 +228,10 @@ function setUp() {
228 228
 		
229 229
 		// Preserve memory settings
230 230
 		$this->originalMemoryLimit = ini_get('memory_limit');
231  
-
  231
+		
  232
+		// turn off template debugging
  233
+		SSViewer::set_source_file_comments(false);
  234
+		
232 235
 		// Clear requirements
233 236
 		Requirements::clear();
234 237
 	}
118  forms/CompositeField.php
@@ -34,6 +34,11 @@ class CompositeField extends FormField {
34 34
 	protected $tag = 'div';
35 35
 	
36 36
 	/**
  37
+	 * @var string
  38
+	 */
  39
+	protected $template = "CompositeField";
  40
+	
  41
+	/**
37 42
 	 * @var String Optional description for this set of fields.
38 43
 	 * If the {@link $tag} property is set to use a 'fieldset', this will be
39 44
 	 * rendered as a <legend> tag, otherwise its a 'title' attribute.
@@ -59,6 +64,8 @@ public function __construct($children = null) {
59 64
 
60 65
 	/**
61 66
 	 * Returns all the sub-fields, suitable for <% control FieldList %>
  67
+	 *
  68
+	 * @return FieldList
62 69
 	 */
63 70
 	public function FieldList() {
64 71
 		return $this->children;
@@ -76,9 +83,10 @@ public function setID($id) {
76 83
 		$this->id = $id;
77 84
 		return $this;
78 85
 	}
79  
-	
  86
+
80 87
 	/**
81 88
 	 * Accessor method for $this->children
  89
+	 *
82 90
 	 * @return FieldList
83 91
 	 */
84 92
 	public function getChildren() {
@@ -93,24 +101,33 @@ public function setChildren($children) {
93 101
 		return $this;
94 102
 	}
95 103
 
96  
-	/** @param String */
  104
+	/** 
  105
+	 * @param string 
  106
+	 */
97 107
 	public function setTag($tag) {
98 108
 		$this->tag = $tag;
  109
+		
99 110
 		return $this;
100 111
 	}
101 112
 
102  
-	/** @return String */
  113
+	/**
  114
+	 * @return string 
  115
+	 */
103 116
 	public function getTag() {
104 117
 		return $this->tag;
105 118
 	}
106 119
 
107  
-	/** @param String */
  120
+	/** 
  121
+	 * @param string 
  122
+	 */
108 123
 	public function setLegend($legend) {
109 124
 		$this->legend = $legend;
110 125
 		return $this;
111 126
 	}
112 127
 
113  
-	/** @return String */
  128
+	/**
  129
+	 * @return string 
  130
+	 */
114 131
 	public function getLegend() {
115 132
 		return $this->legend;
116 133
 	}
@@ -118,6 +135,7 @@ public function getLegend() {
118 135
 	function extraClasses() {
119 136
 		$classes = array('field', 'CompositeField', parent::extraClasses());
120 137
 		if($this->columnCount) $classes[] = 'multicolumn';
  138
+		
121 139
 		return implode(' ', $classes);
122 140
 	}
123 141
 
@@ -135,79 +153,35 @@ function getAttributes() {
135 153
 	}
136 154
 
137 155
 	public function Field($properties = array()) {
138  
-		$content = '';
139  
-
140  
-		if($this->tag == 'fieldset' && $this->legend) {
141  
-			$content .= '<legend>' . $this->legend . '<legend>';
142  
-		}
143  
-
144  
-		$fs = $this->FieldList();
145  
-		foreach($fs as $subfield) {
146  
-			if($this->columnCount) {
147  
-				$className = "column{$this->columnCount}";
148  
-				if(!next($fs)) $className .= " lastcolumn";
149  
-				$content .= "\n<div class=\"{$className}\">\n" . $subfield->Field() . "\n</div>\n";
150  
-			} else if($subfield){
151  
-				$content .= "\n" . $subfield->Field() . "\n";
152  
-			}
153  
-		}
154  
-				
155  
-		return $this->createTag($this->getTag(), $this->getAttributes(), $content);
  156
+		$props = $this->customise($properties);
  157
+		
  158
+		return $props->renderWith($this->getTemplate());
156 159
 	}
157 160
 
158 161
 	/**
159  
-	 * Returns the fields nested inside another DIV
  162
+	 * @param array
160 163
 	 */
161 164
 	function FieldHolder($properties = array()) {
162  
-		$content = '';
  165
+		$props = $this->customise($properties);
163 166
 
164  
-		if($this->tag == 'fieldset' && $this->legend) {
165  
-			$content .= '<legend>' . $this->legend . '<legend>';
166  
-		}
167  
-
168  
-		$fs = $this->FieldList();
169  
-		foreach($fs as $subfield) {
170  
-			if($this->columnCount) {
171  
-				$className = "column{$this->columnCount}";
172  
-				if(!next($fs)) $className .= " lastcolumn";
173  
-				$content .= "\n<div class=\"{$className}\">\n" . $subfield->FieldHolder() . "\n</div>\n";
174  
-			} else if($subfield){
175  
-				$content .= "\n" . $subfield->FieldHolder() . "\n";
176  
-			}
177  
-		}
178  
-				
179  
-		return $this->createTag($this->getTag(), $this->getAttributes(), $content);
  167
+		return $props->renderWith($this->getTemplate());
180 168
 	}
181 169
 		
182 170
 	/**
183  
-	 * Returns the fields in the restricted field holder inside a DIV.
  171
+	 * Returns the fields in the restricted field holder.
  172
+	 *
  173
+	 * @param array
184 174
 	 */
185  
-	function SmallFieldHolder() {
186  
-		$fs = $this->FieldList();
187  
-		$tag = $this->getTag();
188  
-		$idAtt = isset($this->id) ? " id=\"{$this->id}\"" : '';
189  
-		$className = ($this->columnCount) ? "field CompositeField {$this->extraClass()} multicolumn" : "field CompositeField {$this->extraClass()}";
190  
-		$content = "<$tag class=\"$className\"$idAtt>";
191  
-
192  
-		if($this->tag == 'fieldset' && $this->legend) {
193  
-			$content .= '<legend>' . $this->legend . '<legend>';
194  
-		}
195  
-		
196  
-		foreach($fs as $subfield) {
197  
-			if($this->columnCount) {
198  
-				$className = "column{$this->columnCount}";
199  
-				if(!next($fs)) $className .= " lastcolumn";
200  
-				$content .= "<div class=\"{$className}\">" . $subfield->FieldHolder() . "</div>";
201  
-			} else if($subfield){
202  
-				$content .= $subfield->SmallFieldHolder() . " ";
203  
-			}
204  
-		}	
205  
-		$content .= "</$tag>";
206  
-	
207  
-		return $content;
  175
+	function SmallFieldHolder($properties = array()) {
  176
+		$obj = ($properties) ? $this->customise($properties) : $this;
  177
+
  178
+		return $obj->renderWith($this->getTemplate());
208 179
 	}	
  180
+	
209 181
 	/**
210  
-	 * Add all of the non-composite fields contained within this field to the list.
  182
+	 * Add all of the non-composite fields contained within this field to the 
  183
+	 * list.
  184
+	 *
211 185
 	 * Sequentialisation is used when connecting the form to its data source
212 186
 	 */
213 187
 	public function collateDataFields(&$list, $saveableOnly = false) {
@@ -232,8 +206,11 @@ public function collateDataFields(&$list, $saveableOnly = false) {
232 206
 	}
233 207
 
234 208
 	function setForm($form) {
235  
-		foreach($this->children as $f) if(is_object($f)) $f->setForm($form);
  209
+		foreach($this->children as $f) 
  210
+			if(is_object($f)) $f->setForm($form);
  211
+			
236 212
 		parent::setForm($form);
  213
+		
237 214
 		return $this;
238 215
 	}
239 216
 	
@@ -242,6 +219,10 @@ function setColumnCount($columnCount) {
242 219
 		return $this;
243 220
 	}
244 221
 	
  222
+	function getColumnCount() {
  223
+		return $this->columnCount;
  224
+	}
  225
+	
245 226
 	function isComposite() { 
246 227
 		return true; 
247 228
 	}
@@ -253,8 +234,11 @@ function hasData() {
253 234
 	public function fieldByName($name) {
254 235
 		return $this->children->fieldByName($name);
255 236
 	}
  237
+	
256 238
 	/**
257 239
 	 * Add a new child field to the end of the set.
  240
+	 * 
  241
+	 * @param FormField
258 242
 	 */
259 243
 	public function push(FormField $field) {
260 244
 		$this->children->push($field);
97  forms/FieldGroup.php
@@ -45,8 +45,8 @@
45 45
  * @subpackage fields-structural
46 46
  */
47 47
 class FieldGroup extends CompositeField {
  48
+	
48 49
 	protected $zebra;
49  
-	public $subfieldParam = "SmallFieldHolder";
50 50
 	
51 51
 	function __construct($arg1 = null, $arg2 = null) {
52 52
 		if(is_array($arg1) || is_a($arg1, 'FieldSet')) {
@@ -85,45 +85,33 @@ function Name(){
85 85
 		return preg_replace("/[^a-zA-Z0-9]+/", "", $this->title);
86 86
 	}
87 87
 
  88
+
88 89
 	/**
89  
-	 * Returns a set of <span class="subfield"> tags, each containing a sub-field.
90  
-	 * You can also use <% control FieldSet %>, if you'd like more control over the generated HTML
91  
-	 * 
92  
-	 * @todo Shouldn't use SmallFieldHolder() (very difficult to style), 
93  
-	 * it is easier to overwrite the <div class="field"> behaviour in a more specific class
  90
+	 * Generates the field HTML with the HTML for child {@link FormField}
  91
+	 *
  92
+	 * @param array $properties custom properties for the template
94 93
 	 */
95 94
 	function Field($properties = array()) {
96  
-		$fs = $this->FieldList();
97  
-    	$spaceZebra = isset($this->zebra) ? " fieldgroup-$this->zebra" : '';
98  
-    	$idAtt = isset($this->id) ? " id=\"{$this->id}\"" : '';
99  
-		$content = "<div class=\"fieldgroup$spaceZebra\"$idAtt>";
100  
-
101  
-		$count = 1;
102  
-		foreach($fs as $subfield) {
103  
-			$childZebra = (!isset($childZebra) || $childZebra == "odd") ? "even" : "odd";
104  
-			if($subfield->hasMethod('setZebra'))  {
105  
-				$subfield->setZebra($childZebra);
106  
-			}
107  
-
108  
-			//label the first and last fields of each surrounding div
109  
-			if ($count == 1) $firstLast = "first";
110  
-			elseif ($count == count($fs)) $firstLast = "last";
111  
-			else $firstLast = '';
112  
-
113  
-			$content .= "<div class=\"fieldgroup-field $firstLast\">" . $subfield->{$this->subfieldParam}() . "</div>";
114  
-			$count++;
115  
-		}
116  
-		$content .= "</div>";
  95
+		$props = $this->customise(new ArrayData($properties));
117 96
 		
118  
-		return $content;
  97
+		return $props->renderWith('FieldGroupField');
119 98
 	}
120 99
 	
121  
-	public function setID($id) {
122  
-		$this->id = Convert::raw2att($id);
  100
+	/**
  101
+	 * Generates the field HTML with the HTML for child {@link FormField}
  102
+	 *
  103
+	 * @param array $properties custom properties for the template
  104
+	 */
  105
+	function FieldHolder($properties = array()) {
  106
+		$props = $this->customise(new ArrayData($properties));
  107
+	
  108
+		return $props->renderWith('FieldGroupHolder');
123 109
 	}
124 110
   
125 111
 	/**
126 112
 	 * Set an odd/even class
  113
+	 *
  114
+	 * @param string $zebra one of odd or even.
127 115
 	 */
128 116
   	function setZebra($zebra) {
129 117
 	    if($zebra == 'odd' || $zebra == 'even') $this->zebra = $zebra;
@@ -131,47 +119,40 @@ function setZebra($zebra) {
131 119
 	    return $this;
132 120
  	}
133 121
   
134  
-	function FieldHolder($properties = array()) {
135  
-		$Title = $this->XML_val('Title');
136  
-		$Message = $this->XML_val('Message');
137  
-		$MessageType = $this->XML_val('MessageType');
138  
-		$RightTitle = $this->XML_val('RightTitle');
139  
-		$Type = $this->XML_val('Type');
140  
-		$extraClass = $this->XML_val('extraClass');
141  
-		$Name = $this->XML_val('Name');
142  
-		$Field = $this->XML_val('Field');
143  
-		
144  
-		$titleBlock = (!empty($Title)) ? "<label class=\"left\">$Title</label>" : "";
145  
-		$messageBlock = (!empty($Message)) ? "<span class=\"message $MessageType\">$Message</span>" : "";
146  
-		$rightTitleBlock = (!empty($RightTitle)) ? "<label class=\"right\">$RightTitle</label>" : "";
147  
-		$id = $Name ? ' id="$Name"' : '';
148  
-
149  
-		return <<<HTML
150  
-<div$id class="field $Type $extraClass">$titleBlock<div class="middleColumn">$Field</div>$rightTitleBlock$messageBlock</div>
151  
-HTML;
  122
+	/**
  123
+	 * @return string
  124
+	 */
  125
+	function getZebra() {
  126
+		return $this->zebra;
152 127
 	}
153 128
 	
  129
+	/**
  130
+	 * @return string
  131
+	 */
154 132
 	function Message() {
155 133
 		$fs = $this->FieldList();
  134
+		
156 135
 		foreach($fs as $subfield) {
157 136
 			if($m = $subfield->Message()) $message[] = $m;
158 137
 		}
159  
-		if(isset($message)) return implode(",  ", $message) . ". ";
  138
+		
  139
+		return (isset($message)) ? implode(",  ", $message) . ". " : "";
160 140
 	}	
161 141
 	
162  
-	function MessageType(){
  142
+	/**
  143
+	 * @return string
  144
+	 */
  145
+	function MessageType() {
163 146
 		$fs = $this->FieldList();
  147
+		
164 148
 		foreach($fs as $subfield) {
165 149
 			if($m = $subfield->MessageType()) $MessageType[] = $m;
166 150
 		}
167  
-		if(isset($MessageType)) {
168  
-			return implode(".  ", $MessageType);
169  
-		}
  151
+		
  152
+		return (isset($MessageType)) ? implode(".  ", $MessageType) : "";
170 153
 	}
171 154
 	
172  
-	function php($data){
  155
+	function php($data) {
173 156
 		return;
174  
-	}
175  
-	
176  
-}
177  
-
  157
+	}	
  158
+}
15  templates/forms/CompositeField.ss
... ...
@@ -0,0 +1,15 @@
  1
+<$Tag class="CompositeField $extraClass <% if ColumnCount %>multi-column<% end_if %>">
  2
+	<% if $Tag == 'fieldset' && $Legend %>
  3
+		<legend>$Legend</legend>
  4
+	<% end_if %>
  5
+	
  6
+	<% loop FieldList %>
  7
+		<% if ColumnCount %>
  8
+			<div class="column-{$ColumnCount} $FirstLast">
  9
+				$FieldHolder
  10
+			</div>
  11
+		<% else %>
  12
+			$FieldHolder
  13
+		<% end_if %>
  14
+	<% end_loop %>
  15
+</$Tag>
7  templates/forms/FieldGroupField.ss
... ...
@@ -0,0 +1,7 @@
  1
+<div class="fieldgroup <% if Zebra %>fieldgroup-zebra<% end_if %>" <% if ID %>id="$ID"<% end_if %>>
  2
+	<% loop FieldList %>
  3
+		<div class="fieldgroup-field $FirstLast $EvenOdd">
  4
+			SmallFieldHolder
  5
+		</div>
  6
+	<% end_loop %>
  7
+</div>
13  templates/forms/FieldGroupHolder.ss
... ...
@@ -0,0 +1,13 @@
  1
+<div <% if Name %>id="$Name"<% end_if %> class="field $Type $extraClass">
  2
+	<% if Title %><label class="left">$Title</label><% end_if %>
  3
+	
  4
+	<div class="middleColumn fieldgroup <% if Zebra %>fieldgroup-$Zebra<% end_if %>">
  5
+		<% loop FieldList %>
  6
+			<div class="fieldgroup-field $FirstLast $EvenOdd">
  7
+				$SmallFieldHolder
  8
+			</div>
  9
+		<% end_loop %>
  10
+	</div>
  11
+	<% if RightTitle %><label class="right">$RightTitle</label><% end_if %>
  12
+	<% if Message %><span class="message $MessageType">$Message</span><% end_if %>
  13
+</div>
24  tests/forms/CompositeFieldTest.php
@@ -30,16 +30,18 @@ function testFieldPosition() {
30 30
 	}
31 31
 	
32 32
 	function testTag() {
33  
-		$composite = new CompositeField(
  33
+		$div = new CompositeField(
34 34
 			new TextField('A'),
35 35
 			new TextField('B')
36 36
 		);
37  
-		$this->assertStringStartsWith('<div', trim($composite->FieldHolder()));
38  
-		$this->assertStringEndsWith('/div>', trim($composite->FieldHolder()));
  37
+		$this->assertStringStartsWith('<div', trim($div->FieldHolder()));
  38
+		$this->assertStringEndsWith('/div>', trim($div->FieldHolder()));
  39
+		
  40
+		$fieldset = new CompositeField();
  41
+		$fieldset->setTag('fieldset');
39 42
 
40  
-		$composite->setTag('fieldset');
41  
-		$this->assertStringStartsWith('<fieldset', trim($composite->FieldHolder()));
42  
-		$this->assertStringEndsWith('/fieldset>', trim($composite->FieldHolder()));		
  43
+		$this->assertStringStartsWith('<fieldset', trim($fieldset->FieldHolder()));
  44
+		$this->assertStringEndsWith('/fieldset>', trim($fieldset->FieldHolder()));		
43 45
 	}
44 46
 
45 47
 	function testLegend() {
@@ -47,18 +49,14 @@ function testLegend() {
47 49
 			new TextField('A'),
48 50
 			new TextField('B')
49 51
 		);
50  
-		$composite->setLegend('My legend');
51  
-		$parser = new CSSContentParser($composite->Field());
52  
-		$root = $parser->getBySelector('div.composite');
53  
-		$this->assertObjectHasAttribute('title', $root[0]->attributes());
54  
-		$this->assertEquals('My legend', (string)$root[0]['title']);
55  
-
  52
+		
56 53
 		$composite->setTag('fieldset');
57 54
 		$composite->setLegend('My legend');
  55
+		
58 56
 		$parser = new CSSContentParser($composite->Field());
59 57
 		$root = $parser->getBySelector('fieldset.composite');
60  
-		$this->assertObjectNotHasAttribute('title', $root[0]->attributes());
61 58
 		$legend = $parser->getBySelector('fieldset.composite legend');
  59
+		
62 60
 		$this->assertNotNull($legend);
63 61
 		$this->assertEquals('My legend', (string)$legend[0]);
64 62
 	}

0 notes on commit 907568b

Ingo Schommer

Ah the good old war between an old and new version of compass ... which one are you running Will?

Please sign in to comment.
Something went wrong with that request. Please try again.