return (new self()) | return (new self()) | ||||
->setProperty($propertyName) | ->setProperty($propertyName) | ||||
->setLabel($label) | ->setLabel($label) | ||||
->setTemplatePath('@LcSov/adminlte/crud/field/image.html.twig') | |||||
->setTemplatePath('@LcSov/adminlte/crud/field/file.html.twig') | |||||
->addWebpackEncoreEntries('field-filemanager') | ->addWebpackEncoreEntries('field-filemanager') | ||||
->setFormType(FileManagerType::class) | ->setFormType(FileManagerType::class) | ||||
->addCssClass('field-text') | ->addCssClass('field-text') |
<?php | |||||
namespace Lc\SovBundle\Field; | |||||
use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldInterface; | |||||
use EasyCorp\Bundle\EasyAdminBundle\Field\FieldTrait; | |||||
use Lc\SovBundle\Form\Type\FileManagerType; | |||||
use Symfony\Component\Form\Extension\Core\Type\TextType; | |||||
/** | |||||
* @author La clic ! <contact@laclic.fr> | |||||
*/ | |||||
final class ImageManagerField implements FieldInterface | |||||
{ | |||||
use FieldTrait; | |||||
public const OPTION_MAX_LENGTH = 'maxLength'; | |||||
public const OPTION_RENDER_AS_HTML = 'renderAsHtml'; | |||||
public static function new(string $propertyName, ?string $label = null): self | |||||
{ | |||||
return (new self()) | |||||
->setProperty($propertyName) | |||||
->setLabel($label) | |||||
->setTemplatePath('@LcSov/adminlte/crud/field/image.html.twig') | |||||
->addWebpackEncoreEntries('field-filemanager') | |||||
->setFormType(FileManagerType::class) | |||||
->addCssClass('field-text') | |||||
->setCustomOption(self::OPTION_MAX_LENGTH, null) | |||||
->setCustomOption(self::OPTION_RENDER_AS_HTML, false); | |||||
} | |||||
public function setMaxLength(int $length): self | |||||
{ | |||||
if ($length < 1) { | |||||
throw new \InvalidArgumentException(sprintf('The argument of the "%s()" method must be 1 or higher (%d given).', __METHOD__, $length)); | |||||
} | |||||
$this->setCustomOption(self::OPTION_MAX_LENGTH, $length); | |||||
return $this; | |||||
} | |||||
public function renderAsHtml(bool $asHtml = true): self | |||||
{ | |||||
$this->setCustomOption(self::OPTION_RENDER_AS_HTML, $asHtml); | |||||
return $this; | |||||
} | |||||
} |
import './common.scss'; | import './common.scss'; | ||||
import log from './utils/log.js'; | import log from './utils/log.js'; | ||||
//log('ncnnc'); | //log('ncnnc'); | ||||
//$('#test22').modal('show'); | |||||
$('[data-toggle="tooltip"]').tooltip(); | |||||
if ($('.select2, select.form-control').length) { | |||||
$('form .form-widget>select.form-control, .select2').each(function (i, elm) { | |||||
if (!$(this).hasClass('disable-select2')) { | |||||
setSelect2($(elm)); | |||||
} | |||||
}); | |||||
$('form .form-inline>select.form-control').each(function (i, elm) { | |||||
if (!$(this).hasClass('disable-select2')) { | |||||
setSelect2($(elm)); | |||||
} | |||||
}); | |||||
} | |||||
function setSelect2($select) { | |||||
if (typeof $select.data('select2-id') === 'undefined') { | |||||
$select.data('init', 'set') | |||||
var options = { | |||||
width: "100%", | |||||
theme: "bootstrap4", | |||||
dropdownAutoWidth: false, | |||||
allowClear: true, | |||||
minimumResultsForSearch: 8 | |||||
}; | |||||
if ($select.data('allow-clear') == 'false') { | |||||
options.allowClear = false; | |||||
} | |||||
if ($select.data('width')) { | |||||
options.width = 'auto' | |||||
} | |||||
if ($select.find('option[value=""]')) { | |||||
options.placeholder = $select.find('option[value=""]').html() | |||||
} | |||||
/*if($select.is(':required') == false) { | |||||
options.allowclear = true | |||||
}*/ | |||||
var myselect = $select.select2(options); | |||||
myselect.on('select2:select', function (e) { | |||||
var event = new Event('change'); | |||||
e.target.dispatchEvent(event); | |||||
}); | |||||
myselect.on('select2:unselect', function (e) { | |||||
var event = new Event('change'); | |||||
e.target.dispatchEvent(event); | |||||
}); | |||||
return myselect; | |||||
} | |||||
} | |||||
// JAVASCRIPT | |||||
import './common.js' | |||||
//require('select2'); | //require('select2'); | ||||
//require('adminlte'); | //require('adminlte'); |
/* Tooltip */ | |||||
$('[data-toggle="tooltip"]').tooltip(); | |||||
/* Select2 */ | /* Select2 */ | ||||
$('select').each(function (){ | |||||
setSelect2($(this)); | |||||
}); | |||||
if ($('.select2, select.form-control').length) { | |||||
$('form .form-widget>select.form-control, .select2').each(function (i, elm) { | |||||
if (!$(this).hasClass('disable-select2')) { | |||||
setSelect2($(elm)); | |||||
} | |||||
}); | |||||
$('form .form-inline>select.form-control').each(function (i, elm) { | |||||
if (!$(this).hasClass('disable-select2')) { | |||||
setSelect2($(elm)); | |||||
} | |||||
}); | |||||
} | |||||
function setSelect2($select) { | function setSelect2($select) { | ||||
if (typeof $select.data('select2-id') === 'undefined') { | if (typeof $select.data('select2-id') === 'undefined') { | ||||
$select.data('init', 'set') | $select.data('init', 'set') | ||||
var options = { | var options = { | ||||
width: "100%", | width: "100%", | ||||
theme: "bootstrap-5", | |||||
theme: "bootstrap4", | |||||
dropdownAutoWidth: false, | dropdownAutoWidth: false, | ||||
allowClear: true, | allowClear: true, | ||||
minimumResultsForSearch: 1 | |||||
minimumResultsForSearch: 8 | |||||
}; | }; | ||||
if ($select.data('allow-clear') == 'false') { | if ($select.data('allow-clear') == 'false') { | ||||
/*if($select.is(':required') == false) { | /*if($select.is(':required') == false) { | ||||
options.allowclear = true | options.allowclear = true | ||||
}*/ | }*/ | ||||
let myselect = $select.select2(options); | |||||
var myselect = $select.select2(options); | |||||
myselect.on('select2:select', function (e) { | myselect.on('select2:select', function (e) { | ||||
var event = new Event('change'); | var event = new Event('change'); |
} | } | ||||
} | } | ||||
/* modal */ | |||||
.modal { | |||||
.modal-body { | |||||
img { | |||||
max-width: 100% ; | |||||
} | |||||
} | |||||
} |
{% if field.value is not null and field.value.path is not null %} | |||||
<a href="{{ asset(field.value.path) }}" class="" title="{{ field.value.legend }}"> | |||||
Télécharger | |||||
</a> | |||||
{% else %} | |||||
<div class="badge badge-secondary">Aucun(e)</div> | |||||
{% endif %} |
{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #} | {# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #} | ||||
{# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #} | {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #} | ||||
{# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #} | {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #} | ||||
{% set html_id = 'ea-lightbox-' ~ field.uniqueId %} | |||||
{% if field.value is not null and field.value.path is not null %} | {% if field.value is not null and field.value.path is not null %} | ||||
<a href="#" class="ea-lightbox-thumbnail" title="{{ field.value.legend }}" data-featherlight="#{{ html_id }}" data-featherlight-close-on-click="anywhere"> | |||||
<img src="{{ asset(field.value.path) }}" class="img-fluid"> | |||||
</a> | |||||
<div id="{{ html_id }}" class="ea-lightbox"> | |||||
<img src="{{ asset(field.value.path) }}"> | |||||
</div> | |||||
{% set id_modal = 'modal-'~field.value.id %} | |||||
<a href="{{ lc_liip(field.value.path, 'big') }}" data-toggle="modal" data-target="#{{ id_modal }}" title="{{ field.value.legend }}"> | |||||
<img src="{{ lc_liip(field.value.path, 'thumbnail') }}" alt="{{ field.value.legend }}"> | |||||
</a> | |||||
{% embed "@LcSov/adminlte/embed/modal.twig" %} | |||||
{% block id %}{{ id_modal }}{% endblock %} | |||||
{% block size %}modal-xl{% endblock %} | |||||
{% block title %}{{ field.value.legend ? field.value.legend : 'Image' }}{% endblock %} | |||||
{% block content %} | |||||
<img src="{{ lc_liip(field.value.path, 'big') }}" alt="{{ field.value.legend }}" /> | |||||
{% endblock %} | |||||
{% block footer_wrapper %}{% endblock %} | |||||
{% endembed %} | |||||
{% else %} | {% else %} | ||||
<div class="badge badge-secondary">Aucun(e)</div> | <div class="badge badge-secondary">Aucun(e)</div> | ||||
{% endif %} | {% endif %} |
<div class="modal fade show" id="{% block id %}{% endblock %}"> | |||||
<div class="modal-dialog {% block size %}{% endblock %}"> | |||||
{% block form_start %}{% endblock %} | |||||
<div class="modal-content"> | |||||
<div class="modal-header"> | |||||
<h4 class="modal-title">{% block title %}{% endblock %}</h4> | |||||
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer"> | |||||
<span aria-hidden="true">×</span> | |||||
</button> | |||||
</div> | |||||
<div class="modal-body"> | |||||
{% block content %} | |||||
{% endblock %} | |||||
</div> | |||||
{% block footer_wrapper %} | |||||
<div class="modal-footer justify-content-between"> | |||||
{% block footer %} | |||||
<button type="button" class="btn btn-default" | |||||
data-dismiss="modal">{{ 'action.cancel'|trans }}</button> | |||||
{% endblock %} | |||||
</div> | |||||
{% endblock %} | |||||
</div> | |||||
{% block form_end %}{% endblock %} | |||||
<!-- /.modal-content --> | |||||
</div> | |||||
</div> |