@@ -22,7 +22,7 @@ final class FileManagerField implements FieldInterface | |||
return (new self()) | |||
->setProperty($propertyName) | |||
->setLabel($label) | |||
->setTemplatePath('@LcSov/adminlte/crud/field/image.html.twig') | |||
->setTemplatePath('@LcSov/adminlte/crud/field/file.html.twig') | |||
->addWebpackEncoreEntries('field-filemanager') | |||
->setFormType(FileManagerType::class) | |||
->addCssClass('field-text') |
@@ -0,0 +1,50 @@ | |||
<?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; | |||
} | |||
} |
@@ -23,65 +23,10 @@ import 'adminlte-plugin/select2-bootstrap4-theme/select2-bootstrap4.min.css'; | |||
import './common.scss'; | |||
import log from './utils/log.js'; | |||
//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('adminlte'); |
@@ -1,8 +1,22 @@ | |||
/* Tooltip */ | |||
$('[data-toggle="tooltip"]').tooltip(); | |||
/* 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) { | |||
if (typeof $select.data('select2-id') === 'undefined') { | |||
@@ -10,10 +24,10 @@ function setSelect2($select) { | |||
$select.data('init', 'set') | |||
var options = { | |||
width: "100%", | |||
theme: "bootstrap-5", | |||
theme: "bootstrap4", | |||
dropdownAutoWidth: false, | |||
allowClear: true, | |||
minimumResultsForSearch: 1 | |||
minimumResultsForSearch: 8 | |||
}; | |||
if ($select.data('allow-clear') == 'false') { | |||
@@ -28,7 +42,7 @@ function setSelect2($select) { | |||
/*if($select.is(':required') == false) { | |||
options.allowclear = true | |||
}*/ | |||
let myselect = $select.select2(options); | |||
var myselect = $select.select2(options); | |||
myselect.on('select2:select', function (e) { | |||
var event = new Event('change'); |
@@ -46,3 +46,11 @@ | |||
} | |||
} | |||
/* modal */ | |||
.modal { | |||
.modal-body { | |||
img { | |||
max-width: 100% ; | |||
} | |||
} | |||
} |
@@ -0,0 +1,8 @@ | |||
{% 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 %} |
@@ -1,15 +1,25 @@ | |||
{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #} | |||
{# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #} | |||
{# @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 %} | |||
<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 %} | |||
<div class="badge badge-secondary">Aucun(e)</div> | |||
{% endif %} |
@@ -0,0 +1,29 @@ | |||
<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> |