Improve label position support

neilime · May 10, 2014 · 8a146da · 8a146da
1 parent 72285c9
commit 8a146da
Show file tree

Hide file tree

Showing 73 changed files with 77 additions and 10,290 deletions.
diff --git a/src/TwbBundle/Form/View/Helper/TwbBundleFormCheckbox.php b/src/TwbBundle/Form/View/Helper/TwbBundleFormCheckbox.php
@@ -4,11 +4,6 @@
 
 class TwbBundleFormCheckbox extends \Zend\Form\View\Helper\FormCheckbox {
 
-    /**
-     * @var string
-     */
-    private static $checkboxFormat = '<div class="checkbox">%s</div>';
-
     /**
      * Form label helper instance
      * @var \Zend\Form\View\Helper\FormLabel
@@ -44,21 +39,29 @@ public function render(\Zend\Form\ElementInterface $oElement) {
             $aAttributes['checked'] = 'checked';
         }
 
+        //Render label
+        $sLabelOpen = $sLabelClose = $sLabelContent = '';
+
         //Render label and visible element
-        if (($sLabel = $oElement->getLabel()) && ($oTranslator = $this->getTranslator())) {
-            $sLabel = $oTranslator->translate($sLabel, $this->getTranslatorTextDomain());
-        }
-        $oLabelHelper = $this->getLabelHelper();
+        if ($sLabelContent = $oElement->getLabel()) {
+            if ($oTranslator = $this->getTranslator()) {
+                $sLabelContent = $oTranslator->translate($sLabelContent, $this->getTranslatorTextDomain());
+            }
+
 
-        $sElementContent = '';
-        if ($sLabel) {
-            $sElementContent .= $oLabelHelper->openTag($oElement->getLabelAttributes() ? : null);
+            $oLabelHelper = $this->getLabelHelper();
+            $sLabelOpen = $oLabelHelper->openTag($oElement->getLabelAttributes() ? : null);
+            $sLabelClose = $oLabelHelper->closeTag();
         }
-        $sElementContent .= sprintf(
-                '<input %s%s', $this->createAttributesString($aAttributes), $sClosingBracket
-        );
-        if ($sLabel) {
-            $sElementContent .= $sLabel . $oLabelHelper->closeTag();
+
+        //Render checkbox
+        $sElementContent = sprintf('<input %s%s', $this->createAttributesString($aAttributes), $sClosingBracket);
+
+        //Add label markup
+        if ($this->getLabelPosition($oElement) === \Zend\Form\View\Helper\FormRow::LABEL_PREPEND) {
+            $sElementContent = $sLabelOpen . ($sLabelContent ? rtrim($sLabelContent) . ' ' : '') . $sElementContent . $sLabelClose;
+        } else {
+            $sElementContent = $sLabelOpen . $sElementContent . ($sLabelContent ? ' ' . ltrim($sLabelContent) : '') . $sLabelClose;
         }
 
         //Render hidden input
@@ -70,7 +73,15 @@ public function render(\Zend\Form\ElementInterface $oElement) {
                             )), $sClosingBracket
                     ) . $sElementContent;
         }
-        return $oElement->getOption('disable-twb') ? $sElementContent : sprintf(self::$checkboxFormat, $sElementContent);
+        return $sElementContent;
+    }
+
+    /**
+     * Get the label position
+     * @return string
+     */
+    public function getLabelPosition(\Zend\Form\Element\Checkbox $oElement) {
+        return $oElement->getLabelOption('position')? : \Zend\Form\View\Helper\FormRow::LABEL_APPEND;
     }
 
     /**

diff --git a/src/TwbBundle/Form/View/Helper/TwbBundleFormElement.php b/src/TwbBundle/Form/View/Helper/TwbBundleFormElement.php
@@ -38,13 +38,13 @@ class TwbBundleFormElement extends \Zend\Form\View\Helper\FormElement implements
      * @var array
      */
     protected $classMap = array(
-        'Zend\Form\Element\Button'             => 'formbutton',
-        'Zend\Form\Element\Captcha'            => 'formcaptcha',
-        'Zend\Form\Element\Csrf'               => 'formhidden',
-        'Zend\Form\Element\Collection'         => 'formcollection',
-        'Zend\Form\Element\DateTimeSelect'     => 'formdatetimeselect',
-        'Zend\Form\Element\DateSelect'         => 'formdateselect',
-        'Zend\Form\Element\MonthSelect'        => 'formmonthselect',
+        'Zend\Form\Element\Button' => 'formbutton',
+        'Zend\Form\Element\Captcha' => 'formcaptcha',
+        'Zend\Form\Element\Csrf' => 'formhidden',
+        'Zend\Form\Element\Collection' => 'formcollection',
+        'Zend\Form\Element\DateTimeSelect' => 'formdatetimeselect',
+        'Zend\Form\Element\DateSelect' => 'formdateselect',
+        'Zend\Form\Element\MonthSelect' => 'formmonthselect',
         'TwbBundle\Form\Element\StaticElement' => 'formStatic',
     );
 

diff --git a/src/TwbBundle/Form/View/Helper/TwbBundleFormRow.php b/src/TwbBundle/Form/View/Helper/TwbBundleFormRow.php
@@ -7,17 +7,22 @@ class TwbBundleFormRow extends \Zend\Form\View\Helper\FormRow {
     /**
      * @var string
      */
-    private static $formGroupFormat = '<div class="form-group %s">%s</div>';
+    protected static $formGroupFormat = '<div class="form-group %s">%s</div>';
 
     /**
      * @var string
      */
-    private static $horizontalLayoutFormat = '<div class="%s">%s</div>';
+    protected static $horizontalLayoutFormat = '<div class="%s">%s</div>';
 
     /**
      * @var string
      */
-    private static $helpBlockFormat = '<p class="help-block">%s</p>';
+    protected static $checkboxFormat = '<div class="checkbox">%s</div>';
+
+    /**
+     * @var string
+     */
+    protected static $helpBlockFormat = '<p class="help-block">%s</p>';
 
     /**
      * The class that is added to element that have errors
@@ -90,7 +95,7 @@ public function render(\Zend\Form\ElementInterface $oElement) {
         $sElementContent = $this->renderElement($oElement);
 
         //Render form row
-        if (in_array($sElementType, array('checkbox')) && $sLayout !== \TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_HORIZONTAL) {
+        if ($sElementType === 'checkbox' && $sLayout !== \TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_HORIZONTAL) {
             return $sElementContent . PHP_EOL;
         }
         if (($sElementType === 'submit' || $sElementType === 'button' || $sElementType === 'reset') && $sLayout === \TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_INLINE
@@ -131,20 +136,8 @@ protected function renderElement(\Zend\Form\ElementInterface $oElement) {
             //Multicheckbox elements have to be handled differently as the HTML standard does not allow nested labels. The semantic way is to group them inside a fieldset
             $sElementType = $oElement->getAttribute('type');
 
-            //Checkbox & radio elements are a special case, because label is rendered by their own helper
-            if ($sElementType === 'checkbox') {
-                if (!$oElement->getLabelAttributes() && $this->labelAttributes) {
-                    $oElement->setLabelAttributes($this->labelAttributes);
-                }
-
-                //Render element input
-                if ($sLayout !== \TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_HORIZONTAL) {
-                    return $this->getElementHelper()->render($oElement);
-                }
-                $sLabelContent = '';
-            }
             //Button element is a special case, because label is always rendered inside it
-            elseif ($oElement instanceof \Zend\Form\Element\Button) {
+            if ($oElement instanceof \Zend\Form\Element\Button) {
                 $sLabelContent = '';
             } else {
                 $aLabelAttributes = $oElement->getLabelAttributes() ? : $this->labelAttributes;
@@ -162,10 +155,12 @@ protected function renderElement(\Zend\Form\ElementInterface $oElement) {
                 switch ($sLayout) {
                     //Hide label for "inline" layout
                     case \TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_INLINE:
-                        if (empty($aLabelAttributes['class'])) {
-                            $aLabelAttributes['class'] = 'sr-only';
-                        } elseif (!preg_match('/(\s|^)sr-only(\s|$)/', $aLabelAttributes['class'])) {
-                            $aLabelAttributes['class'] = trim($aLabelAttributes['class'] . ' sr-only');
+                        if ($sElementType !== 'checkbox') {
+                            if (empty($aLabelAttributes['class'])) {
+                                $aLabelAttributes['class'] = 'sr-only';
+                            } elseif (!preg_match('/(\s|^)sr-only(\s|$)/', $aLabelAttributes['class'])) {
+                                $aLabelAttributes['class'] = trim($aLabelAttributes['class'] . ' sr-only');
+                            }
                         }
                         break;
 
@@ -197,12 +192,23 @@ protected function renderElement(\Zend\Form\ElementInterface $oElement) {
         switch ($sLayout) {
             case null:
             case \TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_INLINE:
-                if ($this->getLabelPosition() === self::LABEL_PREPEND) {
-                    $sElementContent = $sLabelOpen . $sLabelContent . $sLabelClose . $this->getElementHelper()->render($oElement) . $this->renderHelpBlock($oElement);
+
+                $sElementContent = $this->getElementHelper()->render($oElement);
+
+                // Checkbox elements are a special case, element is already rendered into label
+                if ($sElementType === 'checkbox') {
+                    $sElementContent = sprintf(self::$checkboxFormat, $sElementContent);
                 } else {
-                    $sElementContent = $this->getElementHelper()->render($oElement) . $sLabelOpen . $sLabelContent . $sLabelClose . $this->renderHelpBlock($oElement);
+                    if ($this->getLabelPosition() === self::LABEL_PREPEND) {
+                        $sElementContent = $sLabelOpen . $sLabelContent . $sLabelClose . $sElementContent;
+                    } else {
+                        $sElementContent = $sElementContent . $sLabelOpen . $sLabelContent . $sLabelClose;
+                    }
                 }
 
+                //Render help block
+                $sElementContent .= $this->renderHelpBlock($oElement);
+
                 //Render errors
                 if ($this->renderErrors) {
                     $sElementContent .= $this->getElementErrorsHelper()->render($oElement);
@@ -225,10 +231,10 @@ protected function renderElement(\Zend\Form\ElementInterface $oElement) {
                     $sClass .= ' col-' . $sColumSize;
                 }
 
-                // Checkbox elements are a  special case. They don't need to render a label again
+                // Checkbox elements are a special case, element is rendered into label
                 if ($sElementType === 'checkbox') {
                     return sprintf(
-                            self::$horizontalLayoutFormat, $sClass, $sElementContent
+                            self::$horizontalLayoutFormat, $sClass, sprintf(self::$checkboxFormat, $sElementContent)
                     );
                 }
 

diff --git a/tests/TwbBundleTest/Form/View/Helper/TwbBundleFormRowTest.php b/tests/TwbBundleTest/Form/View/Helper/TwbBundleFormRowTest.php
@@ -124,11 +124,11 @@ public function testRenderHiddenElement() {
 
     public function testRendeCheckboxWithDefinedLabelAttributes() {
         $oElement = new \Zend\Form\Element\Checkbox('test-checkbox');
-        $oElement->setLabel('Test checkobx');
+        $oElement->setLabel('Test checkbox');
         $this->formRowHelper->setLabelAttributes(array('class' => 'test-class'));
 
         //Test content
-        $this->assertStringEqualsFile($this->expectedPath . 'checkobx-defined-label-attributes.phtml', $this->formRowHelper->__invoke($oElement));
+        $this->assertStringEqualsFile($this->expectedPath . 'checkbox-defined-label-attributes.phtml', $this->formRowHelper->__invoke($oElement));
     }
 
     public function testRendeRadiosWithHorizontalLayout() {

diff --git a/tests/_files/expected-forms/basic-example.phtml b/tests/_files/expected-forms/basic-example.phtml
@@ -1,6 +1,6 @@
 <form action="" method="POST" role="form"><div class="form-group "><label for="exampleInputEmail1">Email address</label><input name="input-email" type="email" placeholder="Enter&#x20;email" id="exampleInputEmail1" class="form-control" value=""></div>
 <div class="form-group "><label for="exampleInputPassword1">Password</label><input name="input-password" type="password" placeholder="Password" id="exampleInputPassword1" class="form-control" value=""></div>
 <div class="form-group "><label for="exampleInputFile">File input</label><input name="input-file" type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div>
-<div class="checkbox"><input type="hidden" name="input-checkbox" value="0"><label><input type="checkbox" name="input-checkbox" value="1">Check me out</label></div>
+<div class="checkbox"><input type="hidden" name="input-checkbox" value="0"><label><input type="checkbox" name="input-checkbox" value="1"> Check me out</label></div>
 <div class="form-group "><button type="submit" name="button-submit" class="btn&#x20;btn-default" value="">Submit</button></div>
 </form>
diff --git a/tests/_files/expected-forms/control-states-form-horizontal.phtml b/tests/_files/expected-forms/control-states-form-horizontal.phtml
@@ -1,6 +1,6 @@
 <form action="" method="POST" role="form" class="form-horizontal"><div class="form-group "><div class=""><input name="input-text-disabled" type="text" placeholder="Disabled&#x20;input&#x20;here..." id="disabledInput" class="form-control" value=""></div></div>
 <fieldset disabled="disabled" class="form-horizontal"><div class="form-group "><label class="control-label" for="disabledTextInput">Disabled input</label><div class=""><input name="fieldset-disabled&#x5B;input-text-disabled&#x5D;" type="text" placeholder="Disabled&#x20;input" id="disabledTextInput" class="form-control" value=""></div></div>
 <div class="form-group "><label class="control-label" for="disabled-select">Disabled select menu</label><div class=""><select name="fieldset-disabled&#x5B;disabled-select&#x5D;" id="disabled-select" class="form-control"><option value="">Disabled select</option></select></div></div>
-<div class="form-group "><div class=""><div class="checkbox"><input type="hidden" name="fieldset-disabled&#x5B;input-checkbox&#x5D;" value="0"><label><input type="checkbox" name="fieldset-disabled&#x5B;input-checkbox&#x5D;" value="1">Can't check this</label></div></div></div>
+<div class="form-group "><div class=""><div class="checkbox"><input type="hidden" name="fieldset-disabled&#x5B;input-checkbox&#x5D;" value="0"><label class="control-label"><input type="checkbox" name="fieldset-disabled&#x5B;input-checkbox&#x5D;" value="1"> Can't check this</label></div></div></div>
 <div class="form-group "><div class=""><button type="submit" name="fieldset-disabled&#x5B;button-submit&#x5D;" class="btn-primary&#x20;btn" value="">Submit</button></div></div>
 </fieldset></form>
diff --git a/tests/_files/expected-forms/control-states-form.phtml b/tests/_files/expected-forms/control-states-form.phtml
@@ -1,6 +1,6 @@
 <form action="" method="POST" role="form"><div class="form-group "><input name="input-text-disabled" type="text" placeholder="Disabled&#x20;input&#x20;here..." id="disabledInput" class="form-control" value=""></div>
 <fieldset disabled="disabled"><div class="form-group "><label for="disabledTextInput">Disabled input</label><input name="fieldset-disabled&#x5B;input-text-disabled&#x5D;" type="text" placeholder="Disabled&#x20;input" id="disabledTextInput" class="form-control" value=""></div>
 <div class="form-group "><label for="disabled-select">Disabled select menu</label><select name="fieldset-disabled&#x5B;disabled-select&#x5D;" id="disabled-select" class="form-control"><option value="">Disabled select</option></select></div>
-<div class="checkbox"><input type="hidden" name="fieldset-disabled&#x5B;input-checkbox&#x5D;" value="0"><label><input type="checkbox" name="fieldset-disabled&#x5B;input-checkbox&#x5D;" value="1">Can't check this</label></div>
+<div class="checkbox"><input type="hidden" name="fieldset-disabled&#x5B;input-checkbox&#x5D;" value="0"><label><input type="checkbox" name="fieldset-disabled&#x5B;input-checkbox&#x5D;" value="1"> Can't check this</label></div>
 <div class="form-group "><button type="submit" name="fieldset-disabled&#x5B;button-submit&#x5D;" class="btn-primary&#x20;btn" value="">Submit</button></div>
 </fieldset></form>
diff --git a/tests/_files/expected-forms/horizontal-form.phtml b/tests/_files/expected-forms/horizontal-form.phtml
@@ -1,5 +1,5 @@
 <form action="" method="POST" class="form-horizontal" role="form"><div class="form-group "><label class="col-sm-2&#x20;control-label" for="inputEmail1">Email</label><div class=" col-sm-10"><input name="input-email" type="email" placeholder="Enter&#x20;email" id="inputEmail1" class="form-control" value=""></div></div>
 <div class="form-group "><label class="col-sm-2&#x20;control-label" for="inputPassword1">Password</label><div class=" col-sm-10"><input name="input-password" type="password" placeholder="Password" id="inputPassword1" class="form-control" value=""></div></div>
-<div class="form-group "><div class=" col-sm-10 col-sm-offset-2"><div class="checkbox"><input type="hidden" name="input-checkbox" value="0"><label><input type="checkbox" name="input-checkbox" value="1">Remember me</label></div></div></div>
+<div class="form-group "><div class=" col-sm-10 col-sm-offset-2"><div class="checkbox"><input type="hidden" name="input-checkbox" value="0"><label class="control-label"><input type="checkbox" name="input-checkbox" value="1"> Remember me</label></div></div></div>
 <div class="form-group "><div class=" col-sm-10 col-sm-offset-2"><button type="submit" name="button-submit" class="btn&#x20;btn-default" value="">Sign in</button></div></div>
 </form>
diff --git a/tests/_files/expected-forms/inline-form.phtml b/tests/_files/expected-forms/inline-form.phtml
@@ -1,5 +1,5 @@
 <form action="" method="POST" class="form-inline" role="form"><div class="form-group "><label class="sr-only" for="exampleInputEmail2">Email address</label><input name="input-email" type="email" placeholder="Enter&#x20;email" id="exampleInputEmail2" class="form-control" value=""></div>
 <div class="form-group "><label class="sr-only" for="exampleInputPassword2">Password</label><input name="input-password" type="password" placeholder="Password" id="exampleInputPassword2" class="form-control" value=""></div>
-<div class="checkbox"><input type="hidden" name="input-checkbox" value="0"><label><input type="checkbox" name="input-checkbox" value="1">Remember me</label></div>
+<div class="checkbox"><input type="hidden" name="input-checkbox" value="0"><label><input type="checkbox" name="input-checkbox" value="1"> Remember me</label></div>
 <button type="submit" name="button-submit" class="btn&#x20;btn-default" value="">Sign in</button>
 </form>
diff --git a/tests/_files/expected-forms/supported-controls-form.phtml b/tests/_files/expected-forms/supported-controls-form.phtml
@@ -1,6 +1,6 @@
 <form action="" method="POST" role="form"><div class="form-group "><input name="input-text" type="text" placeholder="Text&#x20;input" class="form-control" value=""></div>
 <div class="form-group "><textarea name="input-text-area" class="form-control"></textarea></div>
-<div class="checkbox"><input type="hidden" name="input-checkbox" value="0"><label><input type="checkbox" name="input-checkbox" value="1">Option one is this and that-be sure to include why it's great</label></div>
+<div class="checkbox"><input type="hidden" name="input-checkbox" value="0"><label><input type="checkbox" name="input-checkbox" value="1"> Option one is this and that-be sure to include why it's great</label></div>
 <div class="form-group "><div class="radio"><label><input type="radio" name="optionsRadios" value="option1">Option one is this and that-be sure to include why it&#039;s great</label></div><div class="radio"><label><input type="radio" name="optionsRadios" value="optionsRadios2">Option two can be something else and selecting it will deselect option one</label></div></div>
 <div class="form-group "><label class="checkbox-inline"><input type="checkbox" name="optionsRadios&#x5B;&#x5D;" id="inlineCheckbox1" value="option1">1</label><label class="checkbox-inline"><input type="checkbox" name="optionsRadios&#x5B;&#x5D;" id="inlineCheckbox2" value="option2">2</label><label class="checkbox-inline"><input type="checkbox" name="optionsRadios&#x5B;&#x5D;" id="inlineCheckbox3" value="option3">3</label></div>
 <div class="form-group "><label class="checkbox"><input type="checkbox" name="optionsRadiosNoInline&#x5B;&#x5D;" id="noInlineCheckbox1" value="option1">1</label><label class="checkbox"><input type="checkbox" name="optionsRadiosNoInline&#x5B;&#x5D;" id="noInlineCheckbox2" value="option2">2</label><label class="checkbox"><input type="checkbox" name="optionsRadiosNoInline&#x5B;&#x5D;" id="noInlineCheckbox3" value="option3">3</label></div>

diff --git a/...s/checkobx-defined-label-attributes.phtml → ...s/checkbox-defined-label-attributes.phtml b/...s/checkobx-defined-label-attributes.phtml → ...s/checkbox-defined-label-attributes.phtml
@@ -1 +1 @@
-<div class="checkbox"><input type="hidden" name="test-checkbox" value="0"><label class="test-class"><input type="checkbox" name="test-checkbox" value="1">Test checkobx</label></div>
+<div class="checkbox"><input type="hidden" name="test-checkbox" value="0"><label class="test-class"><input type="checkbox" name="test-checkbox" value="1"> Test checkbox</label></div>