Zend_Form element for image selection

Hello. Without long introductions, I want to show what an element looks like, the creation of which I am going to tell:


I decided to call it RadioImage.

Recently, it was necessary to provide the user with the ability to download and select an icon for product status in the online store. Previously, I solved the problem of selecting small icons using various jQuery plug-ins (this picture is not mine):
')

(and that, by the way, was very lazy and did not write a separate decorator / element, but simply managed with JavaScript).

But this time the icons can be of different sizes and generally do not want to be shallow, and if you make a select with large pictures, it will be out of shape.

I remembered that I already did this and climbed to look:

In principle, the normal option, but I think normal for us - the developers. For some, it may not be clear why a mediator like the checkbox is needed here. Plus, again, this is not a Zend_Form element of the MultiImageCheckbox type, but simply generated html directly in the view script is not good. If it came in handy the second time, you need to do it humanly.

This time I need to provide a choice of only one icon, so our element will not allow multiple selections (but it’s not difficult to fix by creating another element based on this, CheckImage for example).

There is one more requirement - jQuery, I used to use the ZendX_JQuery view helper, but you can connect a file with js code using Zend_VIew_Helper_HeadScript.

Let's go, the code with the comments. I'll start backwards with the form:

application / forms / ProductStatus.php

<?php class Form_ProductStatus extends Zend_Form { public function init() { $this->setMethod('post'); $this->setName('statusform'); $this->setAttrib('enctype', 'multipart/form-data'); $this->addElement('text', 'prodstatus_name', array( 'required' => true, 'label' => 'Status Name', 'filters' => array('StringTrim') )); //     $img = new App_Form_Element_RadioImage('prodstatus_icon', array( 'label' => 'Select Icon', // HTML         <img /> 'width' => '48' )); // BaseUrl        , //        - $bu = $this->getView()->baseUrl(); //     /  , //       $icons = array( "black_new.png" => $bu.'/icons/black_new.png', "black_sale.png" => $bu.'/icons/black_sale.png', "blue_new.png" => $bu.'/icons/blue_new.png', "label_sale.png" => $bu.'/icons/label_sale.png', "new_blue.png" => $bu.'/icons/new_blue.png', "new_red.png" => $bu.'/icons/new_red.png', "sale_blue.png" => $bu.'/icons/sale_blue.png', "sale_green.png" => $bu.'/icons/sale_green.png', "sale_yellow.png" => $bu.'/icons/sale_yellow.png', "sticker_blue_sale.png" => $bu.'/icons/sticker_blue_sale.png' ); //  $key -      // . .    [«prodstatus_icon»] => $key (  ) // $val       img .. <img src="$val"/> foreach ($icons as $key => $val) { //      (      select) //     addMultiOptions()   //       $img->addMultiOption($key, $val); } $this->addElement($img); $this->addElement('submit', 'Save'); } } 

Maybe at first glance it looks like a lot of code, in a live project it takes me a few lines:

  $img = new App_Form_Element_SelectImage('prodstatus_icon', array( 'label' => 'Select Icon', 'width' => '48' )); $icons = App_Tool::scandir(PUBLIC_PATH.'/modules/products/icons', 'png'); foreach ($icons as $icon) { $img->addMultiOption($icon, $this->getView()->baseUrl().'/modules/products/icons/'.$icon); } $this->addElement($img); 

In my opinion, element initialization is quite simple - the very thing for reuse. Here is how it is implemented in the library:

App / Form / Element / RadioImage.php

 <?php require_once 'Zend/Form/Element/Multi.php'; /** * RadioImage form element * * @category App * @package App_Form * @subpackage Element */ class App_Form_Element_RadioImage extends Zend_Form_Element_Multi { /** * @var string */ public $helper = 'FormRadioImage'; } 

By analogy with many built-in elements of Zend_Form, our element is only an interface to the FormRadioImage helper, and all the logic in it is:

App / View / Helper / FormRadioImage.php

 <?php require_once 'Zend/View/Helper/FormElement.php'; /** * @category App * @package App_View * @subpackage Helper * @uses ZendX_Jquery */ class App_View_Helper_FormRadioImage extends Zend_View_Helper_FormElement { /** * @param string|array $name     "name"  <input /> * @param mixed $value   -   *   . * @param array|string $attribs Html    . * @param array $options        . * @return string  html */ public function formRadioImage($name, $value = null, $attribs = null, $options = null) { $info = $this->_getInfo($name, $value, $attribs, $options); extract($info); // name, value, attribs, options //       (     ) $options = (array) $options; $xhtml = ''; $list = array(); //      ,   $list[] = '<input type="hidden" id="'.$name.'" name="'.$name.'" value="'.$value.'" />'; require_once 'Zend/Filter/Alnum.php'; $filter = new Zend_Filter_Alnum(); //   CSS      //    class="selected" $selectedClass = (isset($attribs['selectedClass']) && !empty ($attribs['selectedClass']))?$attribs['selectedClass']:'selected'; $selectedClass = $filter->filter($selectedClass); if(!isset($attribs['class'])) $attribs['class'] = null; //      CSS  ( ) $classBck = $attribs['class']; //    foreach ($options as $optVal => $imgPath) { //  id   <img /> $imgId = $id . '-' . $filter->filter($optVal); //  ,       selected if ($optVal == $value) { $attribs['class'] .= " ".$selectedClass; } //     $list[] = '<img ' . 'src="'.$imgPath.'" ' . 'id="'.$imgId.'" ' . 'rel="'.$optVal.'" ' . $this->_htmlAttribs($attribs) . '/>'; //   selected,        if(strstr($attribs['class'], $selectedClass)) $attribs['class'] = $classBck; } //    ,       $list[] = '<br /><a href=\"javascript;\">Reset Selection</a>'.PHP_EOL; $xhtml .= implode(PHP_EOL, $list); //     jQuery //        hidden  $this->view->jQuery()->addOnLoad(" //    $('#$name-element img').click(function(){ $('#$name').val($(this).attr('rel')); $('#$name-element img').removeClass('$selectedClass'); $(this).addClass('$selectedClass'); }); //    $('#$name-element a').click(function(){ $('#$name-element img').removeClass('$selectedClass'); $('#$name').val('') return false; }); "); //     (-) //    css        CSS $this->view->headStyle(" #$name-element img {cursor:pointer; border:3px solid white} #$name-element img.selected {border:3px solid blue} "); return $xhtml; } } 

Everything. It seems not forgotten.

Picture again, so as not to scroll up:



Thanks for attention.