ソースを参照

[Adminlte] Listes : field image

tags/0.1
Guillaume 3年前
コミット
d01fb6436a
8個のファイルの変更135行の追加71行の削除
  1. +1
    -1
      Field/FileManagerField.php
  2. +50
    -0
      Field/ImageManagerField.php
  3. +2
    -57
      Resources/assets/apps/backend-common/app.common.js
  4. +20
    -6
      Resources/assets/apps/backend-common/common.js
  5. +8
    -0
      Resources/assets/apps/backend-common/common.scss
  6. +8
    -0
      Resources/views/adminlte/crud/field/file.html.twig
  7. +17
    -7
      Resources/views/adminlte/crud/field/image.html.twig
  8. +29
    -0
      Resources/views/adminlte/embed/modal.twig

+ 1
- 1
Field/FileManagerField.php ファイルの表示

@@ -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')

+ 50
- 0
Field/ImageManagerField.php ファイルの表示

@@ -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;
}
}

+ 2
- 57
Resources/assets/apps/backend-common/app.common.js ファイルの表示

@@ -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');

+ 20
- 6
Resources/assets/apps/backend-common/common.js ファイルの表示

@@ -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');

+ 8
- 0
Resources/assets/apps/backend-common/common.scss ファイルの表示

@@ -46,3 +46,11 @@
}
}

/* modal */
.modal {
.modal-body {
img {
max-width: 100% ;
}
}
}

+ 8
- 0
Resources/views/adminlte/crud/field/file.html.twig ファイルの表示

@@ -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 %}

+ 17
- 7
Resources/views/adminlte/crud/field/image.html.twig ファイルの表示

@@ -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 %}

+ 29
- 0
Resources/views/adminlte/embed/modal.twig ファイルの表示

@@ -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>

読み込み中…
キャンセル
保存