mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
ENHANCEMENT: move hard coded template HTML for composite field and field group out to separate template files.
This commit is contained in:
Will Rossiter
parent
3572b31a94
commit
907568b182
@ -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; }
|
||||
|
||||
@ -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 {
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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; }
|
||||
|
||||
|
||||
@ -228,7 +228,10 @@ 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();
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -76,9 +83,10 @@ class CompositeField extends FormField {
|
||||
$this->id = $id;
|
||||
return $this;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 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 = '';
|
||||
|
||||
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);
|
||||
$props = $this->customise($properties);
|
||||
|
||||
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>';
|
||||
}
|
||||
|
||||
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;
|
||||
return $obj->renderWith($this->getTemplate());
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
|
||||
@ -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
|
||||
*
|
||||
* @todo Shouldn't use SmallFieldHolder() (very difficult to style),
|
||||
* it is easier to overwrite the <div class="field"> behaviour in a more specific class
|
||||
* Generates the field HTML with the HTML for child {@link FormField}
|
||||
*
|
||||
* @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>";
|
||||
|
||||
$count = 1;
|
||||
foreach($fs as $subfield) {
|
||||
$childZebra = (!isset($childZebra) || $childZebra == "odd") ? "even" : "odd";
|
||||
if($subfield->hasMethod('setZebra')) {
|
||||
$subfield->setZebra($childZebra);
|
||||
}
|
||||
|
||||
//label the first and last fields of each surrounding div
|
||||
if ($count == 1) $firstLast = "first";
|
||||
elseif ($count == count($fs)) $firstLast = "last";
|
||||
else $firstLast = '';
|
||||
|
||||
$content .= "<div class=\"fieldgroup-field $firstLast\">" . $subfield->{$this->subfieldParam}() . "</div>";
|
||||
$count++;
|
||||
}
|
||||
$content .= "</div>";
|
||||
$props = $this->customise(new ArrayData($properties));
|
||||
|
||||
return $content;
|
||||
return $props->renderWith('FieldGroupField');
|
||||
}
|
||||
|
||||
public function setID($id) {
|
||||
$this->id = Convert::raw2att($id);
|
||||
/**
|
||||
* 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));
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
15
templates/forms/CompositeField.ss
Normal file
15
templates/forms/CompositeField.ss
Normal 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>
|
||||
7
templates/forms/FieldGroupField.ss
Normal file
7
templates/forms/FieldGroupField.ss
Normal 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>
|
||||
13
templates/forms/FieldGroupHolder.ss
Normal file
13
templates/forms/FieldGroupHolder.ss
Normal 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>
|
||||
@ -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()));
|
||||
|
||||
$fieldset = new CompositeField();
|
||||
$fieldset->setTag('fieldset');
|
||||
|
||||
$composite->setTag('fieldset');
|
||||
$this->assertStringStartsWith('<fieldset', trim($composite->FieldHolder()));
|
||||
$this->assertStringEndsWith('/fieldset>', trim($composite->FieldHolder()));
|
||||
$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]);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user