*/ namespace Magento\Framework\Data\Form\Element; use Magento\Framework\Escaper; class Gallery extends AbstractElement { /** * @param Factory $factoryElement * @param CollectionFactory $factoryCollection * @param Escaper $escaper * @param array $data */ public function __construct( Factory $factoryElement, CollectionFactory $factoryCollection, Escaper $escaper, $data = [] ) { parent::__construct($factoryElement, $factoryCollection, $escaper, $data); $this->setType('file'); } /** * @return string * @SuppressWarnings(PHPMD.ExcessiveMethodLength) * @SuppressWarnings(PHPMD.UnusedLocalVariable) */ public function getElementHtml() { $gallery = $this->getValue(); $html = ''; $html .= '' . '' . '' . '' . '' . '' . '' . ''. ''; $widgetButton = $this->getForm()->getParent()->getLayout(); $buttonHtml = $widgetButton->createBlock( \Magento\Backend\Block\Widget\Button::class )->setData( ['label' => 'Add New Image', 'onclick' => 'addNewImg()', 'class' => 'add'] )->toHtml(); $html .= ''; $html .= ''; $html .= ''; $html .= ''; $html .= ''; $html .= ''; $i = 0; if ($this->getValue() !== null) { foreach ($this->getValue() as $image) { $i++; $html .= ''; foreach ($this->getValue()->getAttributeBackend()->getImageTypes() as $type) { $url = $image->setType($type)->getSourceUrl(); $html .= ''; } $html .= ''; $html .= ''; $html .= ''; } } if ($i == 0) { $html .= ''; } $html .= '

Big Image	Thumbnail	Small Thumb	Sort Order	Delete
' . $buttonHtml . '
'; $html .= '_getUiId( 'image-' . $image->getValueId() ) . '> '; $html .= '_getUiId( 'file' ) . ' >	' . '_getUiId( 'position-' . $image->getValueId() ) . '/>	' . '_getUiId( 'delete-button-' . $image->getValueId() ) . '/>

'; $name = $this->getName(); $parentName = parent::getName(); $html .= << id = 0; function addNewImg(){ document.getElementById("gallery_thead").style.visibility="visible"; id--; new_file_input = ''; // Sort order input var new_row_input = document.createElement( 'input' ); new_row_input.type = 'text'; new_row_input.name = '{$parentName}[position]['+id+']'; new_row_input.size = '3'; new_row_input.value = '0'; // Delete button var new_row_button = document.createElement( 'input' ); new_row_button.type = 'checkbox'; new_row_button.value = 'Delete'; table = document.getElementById( "gallery" ); // no of rows in the table: noOfRows = table.rows.length; // no of columns in the pre-last row: noOfCols = table.rows[noOfRows-2].cells.length; // insert row at pre-last: var x=table.insertRow(noOfRows-1); // insert cells in row. for (var j = 0; j < noOfCols; j++) { newCell = x.insertCell(j); newCell.align = "center"; newCell.valign = "middle"; if (j==3) { newCell.appendChild( new_row_input ); } else if (j==4) { newCell.appendChild( new_row_button ); } else { newCell.innerHTML = new_file_input.replace(/%j%/g, j).replace(/%id%/g, id); } } // Delete function new_row_button.onclick= function(){ this.parentNode.parentNode.parentNode.removeChild( this.parentNode.parentNode ); // Appease Safari // without it Safari wants to reload the browser window // which nixes your already queued uploads return false; }; } EndSCRIPT; $html .= $this->getAfterElementHtml(); return $html; } /** * @return mixed */ public function getName() { return $this->getData('name'); } /** * @return mixed */ public function getParentName() { return parent::getName(); } }