ENHANCEMENT: move hard coded template HTML for composite field and field group out to separate template files.

This commit is contained in:
Will Rossiter 2012-04-14 09:47:17 +12:00
parent 3572b31a94
commit 907568b182
11 changed files with 150 additions and 149 deletions

View File

@ -197,7 +197,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
.cms .ss-ui-loading-icon { background: url(../../images/network-save.gif) no-repeat; display: block; width: 16px; height: 16px; }
/** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; }
.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding: 8px 0 0 8px; }
.fieldgroup .fieldgroup-field .field { border: none; padding-bottom: 0; }
/** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */
@ -353,7 +353,7 @@ body.cms { overflow: hidden; }
/* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */
.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; }
.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); }
.cms-content-tools .cms-panel-content { width: 176px; padding: 8px 8px; overflow: auto; height: 100%; }
.cms-content-tools .cms-panel-content { width: 176px; padding: 0 8px; overflow: auto; height: 100%; }
.cms-content-tools .cms-panel-content .dropdown select { width: 160px; }
.cms-content-tools .cms-panel-content #LastEditedFrom { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.cms-content-tools .cms-panel-content #LastEditedFrom input { width: 160px; }

View File

@ -406,7 +406,7 @@ form.small .field, .field.small {
float: left;
display: block;
width: $grid-x * 23;
padding-right: $grid-x;
padding: $grid-y 0 0 $grid-x;
&.odd {

View File

@ -610,8 +610,8 @@ body.cms {
}
.cms-panel-content {
width: $grid-x * 22;
padding: $grid-y $grid-x;
width: ($grid-x * 22);
padding: 0 $grid-x;
overflow: auto;
height:100%;
.dropdown select {

View File

@ -8,17 +8,17 @@ table.details tr { background: #eeeee0; }
p { line-height: 1.5em; margin-top: 0.5em; margin-bottom: 1.0em; }
h1 { margin: 0px 0px 5px; font: 165% verdana, arial, helvetica; }
h1 { margin: 0px 0px 5px; font: 165% verdana,arial,helvetica; }
h2 { margin-top: 1em; margin-bottom: 0.5em; font: bold 125% verdana, arial, helvetica; }
h2 { margin-top: 1em; margin-bottom: 0.5em; font: bold 125% verdana,arial,helvetica; }
h3 { margin-bottom: 0.5em; font: bold 115% verdana, arial, helvetica; }
h3 { margin-bottom: 0.5em; font: bold 115% verdana,arial,helvetica; }
h4 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
h4 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
h5 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
h5 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
h6 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
h6 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
.Error { font-weight: bold; color: red; }

View File

@ -229,6 +229,9 @@ class SapphireTest extends PHPUnit_Framework_TestCase {
// Preserve memory settings
$this->originalMemoryLimit = ini_get('memory_limit');
// turn off template debugging
SSViewer::set_source_file_comments(false);
// Clear requirements
Requirements::clear();
}

View File

@ -33,6 +33,11 @@ class CompositeField extends FormField {
*/
protected $tag = 'div';
/**
* @var string
*/
protected $template = "CompositeField";
/**
* @var String Optional description for this set of fields.
* If the {@link $tag} property is set to use a 'fieldset', this will be
@ -59,6 +64,8 @@ class CompositeField extends FormField {
/**
* Returns all the sub-fields, suitable for <% control FieldList %>
*
* @return FieldList
*/
public function FieldList() {
return $this->children;
@ -79,6 +86,7 @@ class CompositeField extends FormField {
/**
* Accessor method for $this->children
*
* @return FieldList
*/
public function getChildren() {
@ -93,24 +101,33 @@ class CompositeField extends FormField {
return $this;
}
/** @param String */
/**
* @param string
*/
public function setTag($tag) {
$this->tag = $tag;
return $this;
}
/** @return String */
/**
* @return string
*/
public function getTag() {
return $this->tag;
}
/** @param String */
/**
* @param string
*/
public function setLegend($legend) {
$this->legend = $legend;
return $this;
}
/** @return String */
/**
* @return string
*/
public function getLegend() {
return $this->legend;
}
@ -118,6 +135,7 @@ class CompositeField extends FormField {
function extraClasses() {
$classes = array('field', 'CompositeField', parent::extraClasses());
if($this->columnCount) $classes[] = 'multicolumn';
return implode(' ', $classes);
}
@ -135,79 +153,35 @@ class CompositeField extends FormField {
}
public function Field($properties = array()) {
$content = '';
$props = $this->customise($properties);
if($this->tag == 'fieldset' && $this->legend) {
$content .= '<legend>' . $this->legend . '<legend>';
}
$fs = $this->FieldList();
foreach($fs as $subfield) {
if($this->columnCount) {
$className = "column{$this->columnCount}";
if(!next($fs)) $className .= " lastcolumn";
$content .= "\n<div class=\"{$className}\">\n" . $subfield->Field() . "\n</div>\n";
} else if($subfield){
$content .= "\n" . $subfield->Field() . "\n";
}
}
return $this->createTag($this->getTag(), $this->getAttributes(), $content);
return $props->renderWith($this->getTemplate());
}
/**
* Returns the fields nested inside another DIV
* @param array
*/
function FieldHolder($properties = array()) {
$content = '';
$props = $this->customise($properties);
if($this->tag == 'fieldset' && $this->legend) {
$content .= '<legend>' . $this->legend . '<legend>';
}
$fs = $this->FieldList();
foreach($fs as $subfield) {
if($this->columnCount) {
$className = "column{$this->columnCount}";
if(!next($fs)) $className .= " lastcolumn";
$content .= "\n<div class=\"{$className}\">\n" . $subfield->FieldHolder() . "\n</div>\n";
} else if($subfield){
$content .= "\n" . $subfield->FieldHolder() . "\n";
}
}
return $this->createTag($this->getTag(), $this->getAttributes(), $content);
return $props->renderWith($this->getTemplate());
}
/**
* Returns the fields in the restricted field holder inside a DIV.
* Returns the fields in the restricted field holder.
*
* @param array
*/
function SmallFieldHolder() {
$fs = $this->FieldList();
$tag = $this->getTag();
$idAtt = isset($this->id) ? " id=\"{$this->id}\"" : '';
$className = ($this->columnCount) ? "field CompositeField {$this->extraClass()} multicolumn" : "field CompositeField {$this->extraClass()}";
$content = "<$tag class=\"$className\"$idAtt>";
function SmallFieldHolder($properties = array()) {
$obj = ($properties) ? $this->customise($properties) : $this;
if($this->tag == 'fieldset' && $this->legend) {
$content .= '<legend>' . $this->legend . '<legend>';
return $obj->renderWith($this->getTemplate());
}
foreach($fs as $subfield) {
if($this->columnCount) {
$className = "column{$this->columnCount}";
if(!next($fs)) $className .= " lastcolumn";
$content .= "<div class=\"{$className}\">" . $subfield->FieldHolder() . "</div>";
} else if($subfield){
$content .= $subfield->SmallFieldHolder() . " ";
}
}
$content .= "</$tag>";
return $content;
}
/**
* Add all of the non-composite fields contained within this field to the list.
* Add all of the non-composite fields contained within this field to the
* list.
*
* Sequentialisation is used when connecting the form to its data source
*/
public function collateDataFields(&$list, $saveableOnly = false) {
@ -232,8 +206,11 @@ class CompositeField extends FormField {
}
function setForm($form) {
foreach($this->children as $f) if(is_object($f)) $f->setForm($form);
foreach($this->children as $f)
if(is_object($f)) $f->setForm($form);
parent::setForm($form);
return $this;
}
@ -242,6 +219,10 @@ class CompositeField extends FormField {
return $this;
}
function getColumnCount() {
return $this->columnCount;
}
function isComposite() {
return true;
}
@ -253,8 +234,11 @@ class CompositeField extends FormField {
public function fieldByName($name) {
return $this->children->fieldByName($name);
}
/**
* Add a new child field to the end of the set.
*
* @param FormField
*/
public function push(FormField $field) {
$this->children->push($field);

View File

@ -45,8 +45,8 @@
* @subpackage fields-structural
*/
class FieldGroup extends CompositeField {
protected $zebra;
public $subfieldParam = "SmallFieldHolder";
function __construct($arg1 = null, $arg2 = null) {
if(is_array($arg1) || is_a($arg1, 'FieldSet')) {
@ -85,45 +85,33 @@ class FieldGroup extends CompositeField {
return preg_replace("/[^a-zA-Z0-9]+/", "", $this->title);
}
/**
* Returns a set of <span class="subfield"> tags, each containing a sub-field.
* You can also use <% control FieldSet %>, if you'd like more control over the generated HTML
* Generates the field HTML with the HTML for child {@link FormField}
*
* @todo Shouldn't use SmallFieldHolder() (very difficult to style),
* it is easier to overwrite the <div class="field"> behaviour in a more specific class
* @param array $properties custom properties for the template
*/
function Field($properties = array()) {
$fs = $this->FieldList();
$spaceZebra = isset($this->zebra) ? " fieldgroup-$this->zebra" : '';
$idAtt = isset($this->id) ? " id=\"{$this->id}\"" : '';
$content = "<div class=\"fieldgroup$spaceZebra\"$idAtt>";
$props = $this->customise(new ArrayData($properties));
$count = 1;
foreach($fs as $subfield) {
$childZebra = (!isset($childZebra) || $childZebra == "odd") ? "even" : "odd";
if($subfield->hasMethod('setZebra')) {
$subfield->setZebra($childZebra);
return $props->renderWith('FieldGroupField');
}
//label the first and last fields of each surrounding div
if ($count == 1) $firstLast = "first";
elseif ($count == count($fs)) $firstLast = "last";
else $firstLast = '';
/**
* Generates the field HTML with the HTML for child {@link FormField}
*
* @param array $properties custom properties for the template
*/
function FieldHolder($properties = array()) {
$props = $this->customise(new ArrayData($properties));
$content .= "<div class=\"fieldgroup-field $firstLast\">" . $subfield->{$this->subfieldParam}() . "</div>";
$count++;
}
$content .= "</div>";
return $content;
}
public function setID($id) {
$this->id = Convert::raw2att($id);
return $props->renderWith('FieldGroupHolder');
}
/**
* Set an odd/even class
*
* @param string $zebra one of odd or even.
*/
function setZebra($zebra) {
if($zebra == 'odd' || $zebra == 'even') $this->zebra = $zebra;
@ -131,47 +119,40 @@ class FieldGroup extends CompositeField {
return $this;
}
function FieldHolder($properties = array()) {
$Title = $this->XML_val('Title');
$Message = $this->XML_val('Message');
$MessageType = $this->XML_val('MessageType');
$RightTitle = $this->XML_val('RightTitle');
$Type = $this->XML_val('Type');
$extraClass = $this->XML_val('extraClass');
$Name = $this->XML_val('Name');
$Field = $this->XML_val('Field');
$titleBlock = (!empty($Title)) ? "<label class=\"left\">$Title</label>" : "";
$messageBlock = (!empty($Message)) ? "<span class=\"message $MessageType\">$Message</span>" : "";
$rightTitleBlock = (!empty($RightTitle)) ? "<label class=\"right\">$RightTitle</label>" : "";
$id = $Name ? ' id="$Name"' : '';
return <<<HTML
<div$id class="field $Type $extraClass">$titleBlock<div class="middleColumn">$Field</div>$rightTitleBlock$messageBlock</div>
HTML;
/**
* @return string
*/
function getZebra() {
return $this->zebra;
}
/**
* @return string
*/
function Message() {
$fs = $this->FieldList();
foreach($fs as $subfield) {
if($m = $subfield->Message()) $message[] = $m;
}
if(isset($message)) return implode(", ", $message) . ". ";
return (isset($message)) ? implode(", ", $message) . ". " : "";
}
function MessageType(){
/**
* @return string
*/
function MessageType() {
$fs = $this->FieldList();
foreach($fs as $subfield) {
if($m = $subfield->MessageType()) $MessageType[] = $m;
}
if(isset($MessageType)) {
return implode(". ", $MessageType);
}
return (isset($MessageType)) ? implode(". ", $MessageType) : "";
}
function php($data){
function php($data) {
return;
}
}

View File

@ -0,0 +1,15 @@
<$Tag class="CompositeField $extraClass <% if ColumnCount %>multi-column<% end_if %>">
<% 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 %>
</$Tag>

View File

@ -0,0 +1,7 @@
<div class="fieldgroup <% if Zebra %>fieldgroup-zebra<% end_if %>" <% if ID %>id="$ID"<% end_if %>>
<% loop FieldList %>
<div class="fieldgroup-field $FirstLast $EvenOdd">
SmallFieldHolder
</div>
<% end_loop %>
</div>

View File

@ -0,0 +1,13 @@
<div <% if Name %>id="$Name"<% end_if %> class="field $Type $extraClass">
<% if Title %><label class="left">$Title</label><% end_if %>
<div class="middleColumn fieldgroup <% if Zebra %>fieldgroup-$Zebra<% end_if %>">
<% loop FieldList %>
<div class="fieldgroup-field $FirstLast $EvenOdd">
$SmallFieldHolder
</div>
<% end_loop %>
</div>
<% if RightTitle %><label class="right">$RightTitle</label><% end_if %>
<% if Message %><span class="message $MessageType">$Message</span><% end_if %>
</div>

View File

@ -30,16 +30,18 @@ class CompositeFieldTest extends SapphireTest {
}
function testTag() {
$composite = new CompositeField(
$div = new CompositeField(
new TextField('A'),
new TextField('B')
);
$this->assertStringStartsWith('<div', trim($composite->FieldHolder()));
$this->assertStringEndsWith('/div>', trim($composite->FieldHolder()));
$this->assertStringStartsWith('<div', trim($div->FieldHolder()));
$this->assertStringEndsWith('/div>', trim($div->FieldHolder()));
$composite->setTag('fieldset');
$this->assertStringStartsWith('<fieldset', trim($composite->FieldHolder()));
$this->assertStringEndsWith('/fieldset>', trim($composite->FieldHolder()));
$fieldset = new CompositeField();
$fieldset->setTag('fieldset');
$this->assertStringStartsWith('<fieldset', trim($fieldset->FieldHolder()));
$this->assertStringEndsWith('/fieldset>', trim($fieldset->FieldHolder()));
}
function testLegend() {
@ -47,18 +49,14 @@ class CompositeFieldTest extends SapphireTest {
new TextField('A'),
new TextField('B')
);
$composite->setLegend('My legend');
$parser = new CSSContentParser($composite->Field());
$root = $parser->getBySelector('div.composite');
$this->assertObjectHasAttribute('title', $root[0]->attributes());
$this->assertEquals('My legend', (string)$root[0]['title']);
$composite->setTag('fieldset');
$composite->setLegend('My legend');
$parser = new CSSContentParser($composite->Field());
$root = $parser->getBySelector('fieldset.composite');
$this->assertObjectNotHasAttribute('title', $root[0]->attributes());
$legend = $parser->getBySelector('fieldset.composite legend');
$this->assertNotNull($legend);
$this->assertEquals('My legend', (string)$legend[0]);
}