@@ -27,9 +27,8 @@ class GalleryManagerField implements FieldInterface | |||
->setTemplatePath('@LcSov/tabler/crud/field/collection.html.twig') | |||
->setFormType(CollectionType::class) | |||
->addCssClass('field-collection') | |||
->addJsFiles('bundles/lcsov/js/form-type-collection.js') | |||
->addJsFiles('bundles/lcsov/js/form-type-file-manager.js') | |||
->addJsFiles('bundles/lcsov/js/jquery-ui/jquery-ui.min.js') | |||
->addWebpackEncoreEntries('field-collection') | |||
->addWebpackEncoreEntries('field-filemanager') | |||
->setFormTypeOption('allow_add', true) | |||
->setFormTypeOption('allow_delete', true) | |||
->setFormTypeOption('entry_options', array('label'=> false)) |
@@ -27,6 +27,8 @@ 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) { |
@@ -1,10 +1,6 @@ | |||
@import "adminlte-css"; | |||
@import "fontawesome-css"; | |||
/* global */ | |||
body { | |||
font-size: 0.9rem; | |||
} | |||
@import 'scss/_formchecboxradio.scss'; | |||
/* card */ | |||
.card { | |||
@@ -49,3 +45,4 @@ body { | |||
} | |||
} | |||
} | |||
@@ -0,0 +1,30 @@ | |||
/*CUSTOM Checkbox | |||
/* Customize the label (the container) */ | |||
.form-check-label {display: block; position: relative; padding-left: 26px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} | |||
/* Hide the browser's default checkbox */ | |||
.form-check-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} | |||
/* Create a custom checkbox */ | |||
.form-check{padding-left: 0px;} | |||
.form-sent .form-check-label input:invalid ~ .checkmark { border-color: #dc3545;} | |||
.form-check-label input:disabled ~ .checkmark {display: none} | |||
.form-check-label input ~ .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: #eee;border: 1px solid var(--primary);} | |||
.form-check-label.big input ~ .checkmark { height: 21px; width: 21px; } | |||
.form-check-label input[type="checkbox"] ~ .checkmark {top: 2px;} | |||
.form-check-label input[type="radio"] ~ .checkmark { top:3px; border-radius: 50%;} | |||
.form-check-label:hover input ~ .checkmark { background-color: #ccc;} | |||
/* When the checkbox is checked, add a blue background */ | |||
.form-check-label input:checked ~ .checkmark {background-color: var(--primary);} | |||
/* Create the checkmark/indicator (hidden when not checked) */ | |||
.form-check-label .checkmark:after { content: ""; position: absolute; display: none;} | |||
/* Show the checkmark when checked */ | |||
.form-check-label input:checked ~ .checkmark:after {display: block;} | |||
/* Style the checkmark/indicator */ | |||
.form-check-label .checkmark:after {left: 7px; top: 3px; width: 6px; height: 11px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} | |||
.form-check-label input[type="checkbox"] ~ .checkmark:after {left: 6px; top: 2px; width: 6px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} | |||
.form-check-label input[type="radio"] ~ .checkmark:after {top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: white;} | |||
.form-check-label.big input[type="checkbox"] ~ .checkmark:after {left: 7px; top: 3px; width: 6px; height: 11px;} | |||
/* Create a custom radio button */ | |||
@@ -0,0 +1,99 @@ | |||
import "jquery-ui" | |||
import "./form.scss" | |||
$(document).ready(function () { | |||
initCollectionWidget(); | |||
}); | |||
function initCollectionWidget() { | |||
$('.field-collection[data-prototype]').each(function (i, collectionWidget) { | |||
setCollectionWidgetSortable($(collectionWidget)); | |||
reindexKeyCollectionWidget($(collectionWidget)); | |||
setCollectionWidgetAdd($(collectionWidget)); | |||
setCollectionWidgetDelete($(collectionWidget)); | |||
}); | |||
} | |||
function setCollectionWidgetAdd($collectionWidget) { | |||
if ($collectionWidget.data('allow-add')) { | |||
$collectionWidget.find('.field-collection-add').on('click', function (e) { | |||
// grab the prototype template | |||
var newWidget = $collectionWidget.attr('data-prototype'); | |||
// replace the "__name__" used in the id and name of the prototype | |||
// with a number that's unique to your emails | |||
// end name attribute looks like name="contact[emails][2]" | |||
newWidget = newWidget.replace(/__name__/g, getNumItems($collectionWidget)); | |||
// create a new list element and add it to the list | |||
$collectionWidget.find('.form-widget-compound .field-collection-group').append(newWidget); | |||
$collectionWidget.find('.field-collection-item:last').find('.field-position').val(getNumItems($collectionWidget)); | |||
reindexKeyCollectionWidget($collectionWidget); | |||
setCollectionWidgetDelete($collectionWidget); | |||
$collectionWidget.trigger('collection-add-item'); | |||
$collectionWidget.data('num-items', $collectionWidget.data('num-items') + 1); | |||
$collectionWidget.find('.collection-empty').hide(); | |||
}); | |||
} | |||
} | |||
function setCollectionWidgetDelete($collectionWidget) { | |||
if ($collectionWidget.data('allow-delete')) { | |||
$collectionWidget.find('.field-collection-delete').off('click'); | |||
$collectionWidget.find('.field-collection-delete').on('click', function () { | |||
$(this).parents('.form-group:first').remove(); | |||
reindexKeyCollectionWidget($collectionWidget); | |||
if(getNumItems($collectionWidget)==0)$collectionWidget.find('.collection-empty').show(); | |||
}); | |||
} | |||
} | |||
function getNumItems($collectionWidget) { | |||
if ($collectionWidget.data('reindex-key')) { | |||
return $collectionWidget.find('.field-collection-item').length; | |||
} else { | |||
return $collectionWidget.data('num-items'); | |||
} | |||
} | |||
function reindexKeyCollectionWidget($collectionWidget) { | |||
if ($collectionWidget.data('reindex-key')) { | |||
$collectionWidget.find('.field-collection-item').each(function (i, item) { | |||
$(item).find('.input[type="text"]').each(function (y, field) { | |||
let $field = $(field); | |||
//Chanegment ID | |||
let posId = indexOfLastDigit($field.prop('id')); | |||
let idPrefix = $field.prop('id').substr(0, posId); | |||
let idSuffix = $field.prop('id').substr(posId + 1); | |||
$field.prop('id', idPrefix + i + idSuffix); | |||
//Chanegment Name | |||
let posName = indexOfLastDigit($field.prop('name')); | |||
let namePrefix = $field.prop('name').substr(0, posName); | |||
let nameSuffix = $field.prop('name').substr(posName + 1); | |||
$field.prop('name', namePrefix + i + nameSuffix); | |||
}); | |||
}); | |||
} | |||
} | |||
function setCollectionWidgetSortable($collectionWidget) { | |||
if ($collectionWidget.data('sortable')) { | |||
$collectionWidget.find('.field-collection-group').sortable({ | |||
"handle" : '.lc-btn-sortable', | |||
cancel: '' | |||
}); | |||
$collectionWidget.find('.field-collection-group').on("sortupdate", function (event, ui) { | |||
$collectionWidget.find('.field-collection-group>div').each(function (index, item) { | |||
$(item).find('.field-position').val(index); | |||
}); | |||
}); | |||
} | |||
} |
@@ -1,9 +1,15 @@ | |||
import "./form.scss" | |||
$(document).ready(function () { | |||
initFileManager(); | |||
}); | |||
$('.field-collection').bind('collection-add-item', function (){ | |||
initFileManager(); | |||
}); | |||
function initFileManager() { | |||
$('.lc-filemanager-delete').off('click'); | |||
$('.lc-filemanager-delete').on('click', function (e) { | |||
@@ -20,7 +26,7 @@ function initFileManager() { | |||
var path = $(this).attr('data-path') | |||
$('#' + $field.data('id')).val(path); | |||
$('#' + $field.data('id') + '_preview').prop('src',path); | |||
$('#lc-filemanager-modal').modal('hide') | |||
$('#lc-filemanager-modal').modal('hide'); | |||
}); | |||
}); | |||
$("#lc-filemanager-frame").prop('src', $field.data('target')); |
@@ -0,0 +1,25 @@ | |||
.lc-filemenager-preview { | |||
width: 100%; | |||
object-fit: contain; | |||
position: relative; | |||
min-height: 80px; | |||
} | |||
.lc-filemenager-preview .no-image{ | |||
position: absolute; | |||
font-size: 3rem; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 1; | |||
top: 0; | |||
text-align: center; | |||
left: 0; | |||
right: 0; | |||
margin: auto; | |||
} | |||
.lc-filemenager-preview img{ | |||
width: 100%; | |||
z-index: 2; | |||
position: relative; | |||
object-fit: contain; | |||
} |
@@ -59,15 +59,18 @@ | |||
{% endblock %} | |||
{% block main %} | |||
<div class="card"> | |||
<div class="card-body"> | |||
{% block edit_form %} | |||
{{ form(edit_form) }} | |||
{% endblock edit_form %} | |||
{% block delete_form %} | |||
{{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', { entity_id: entity.primaryKeyValue }, with_context = false) }} | |||
{% endblock delete_form %} | |||
<div class="col-8"> | |||
<div class="card"> | |||
<div class="card-body"> | |||
{% block edit_form %} | |||
{{ form(edit_form) }} | |||
{% endblock edit_form %} | |||
{% block delete_form %} | |||
{{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', { entity_id: entity.primaryKeyValue }, with_context = false) }} | |||
{% endblock delete_form %} | |||
</div> | |||
</div> | |||
</div> | |||
{% endblock %} | |||
@@ -169,6 +172,6 @@ | |||
}); | |||
}); | |||
</script> | |||
< | |||
< | |||
{% endblock %} |
@@ -1,21 +1,6 @@ | |||
{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #} | |||
{% use '@EasyAdmin/crud/form_theme.html.twig' %} | |||
{% block form_label -%} | |||
{% if label is not same as(false) -%} | |||
{%- if compound is defined and compound -%} | |||
{%- set element = 'legend' -%} | |||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%} | |||
{%- else -%} | |||
{%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' form-label')|trim}) -%} | |||
{%- endif -%} | |||
{{ parent() }} | |||
{%- endif -%} | |||
{%- endblock form_label %} | |||
{% block gallery_manager_row %} | |||
{{ block('collection_row') }} | |||
{% endblock gallery_manager_row %} | |||
@@ -81,34 +66,84 @@ | |||
{% block file_manager_widget %} | |||
<div class="lc-filemanager col-xs-12"> | |||
<div class="col-md-6 col-xs-12 nopadding" style="padding: 0px;"> | |||
<img style="width: 200px; height: 150px; object-fit: contain; background: #ddd; " src="{{ form.path.vars.value }}" class="lc-filemenager-preview" id="{{ form.path.vars.id }}_preview" alt=""> | |||
<div class="lc-filemanager row"> | |||
<div class="col-md-3 col-xs-12 form-group"> | |||
<div class="lc-filemenager-preview card"> | |||
<div class="no-image"> | |||
<i class="fa fa-image"></i> | |||
</div> | |||
<img src="{{ form.path.vars.value }}" id="{{ form.path.vars.id }}_preview" alt="" class="card-img-top"> | |||
</div> | |||
</div> | |||
<div class="input-group"> | |||
{{ form_widget(form) }} | |||
<div class="input-group-append"> | |||
<button type="button" class="btn btn-sm lc-filemanager-open" data-id="{{ form.path.vars.id }}" | |||
data-target="{{ path('file_manager', {module:1, conf:'default'})|raw }}"> | |||
<i class="fa fa-folder-open-o"></i> | |||
</button> | |||
{% if value %} | |||
<button type="button" class="btn btn-sm lc-filemanager-delete" data-id="{{ form.path.vars.id }}"> | |||
<i class="fa fa-trash-o"></i> | |||
<div class="col-12"> | |||
<div class="input-group"> | |||
<div class="input-group-prepend"> | |||
{% if form.parent.vars['row_attr']['data-sortable'] is defined %} | |||
<button type="button" class="btn btn-success lc-btn-sortable" data-toggle="tooltip" title="Trier les images"> | |||
<i class="fa fa-arrows-alt"></i> | |||
</button> | |||
{% endif %} | |||
<button type="button" class="btn btn-primary lc-filemanager-open" data-id="{{ form.path.vars.id }}" data-toggle="tooltip" title="Sélectionner un fichier" | |||
data-target="{{ path('file_manager', {module:1, conf:'default'})|raw }}"> | |||
<i class="fa fa-folder-open"></i> | |||
</button> | |||
{% endif %} | |||
</div> | |||
{{ form_widget(form.legend) }} | |||
<div class="input-group-append"> | |||
<button type="button" class="btn btn-danger lc-filemanager-delete" data-toggle="tooltip" title="Supprimer l'image" | |||
data-id="{{ form.path.vars.id }}"> | |||
<i class="fa fa-trash"></i> | |||
</button> | |||
</div> | |||
{% if form.parent.vars['row_attr']['data-sortable'] is defined %} | |||
<button type="button" class="btn btn-sm lc-btn-sortable" > | |||
<i class="fa fa-arrows"></i> | |||
</button> | |||
{% endif %} | |||
{{ form_rest(form) }} | |||
</div> | |||
</div> | |||
</div> | |||
{% endblock file_manager_widget %} | |||
{% block checkbox_radio_label -%} | |||
{#- Do not display the label if widget is not defined in order to prevent double label rendering -#} | |||
{%- if widget is defined -%} | |||
{% set is_parent_custom = parent_label_class is defined and ('checkbox-custom' in parent_label_class or 'radio-custom' in parent_label_class or 'switch-custom' in parent_label_class) %} | |||
{% set is_custom = label_attr.class is defined and ('checkbox-custom' in label_attr.class or 'radio-custom' in label_attr.class or 'switch-custom' in label_attr.class) %} | |||
{%- if is_parent_custom or is_custom -%} | |||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' custom-control-label')|trim}) -%} | |||
{%- else %} | |||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-check-label')|trim}) -%} | |||
{%- endif %} | |||
{%- if not compound -%} | |||
{% set label_attr = label_attr|merge({'for': id}) %} | |||
{%- endif -%} | |||
{%- if required -%} | |||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) -%} | |||
{%- endif -%} | |||
{%- if parent_label_class is defined -%} | |||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ parent_label_class)|replace({'checkbox-inline': '', 'radio-inline': '', 'checkbox-custom': '', 'radio-custom': ''})|trim}) -%} | |||
{%- endif -%} | |||
{%- if label is not same as(false) and label is empty -%} | |||
{%- if label_format is not empty -%} | |||
{%- set label = label_format|replace({ | |||
'%name%': name, | |||
'%id%': id, | |||
}) -%} | |||
{%- else -%} | |||
{%- set label = name|humanize -%} | |||
{%- endif -%} | |||
{%- endif -%} | |||
<label{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}> | |||
{{ widget|raw }} | |||
<span class="checkmark"></span> | |||
{# {% if translation_domain == 'lcshop' %} | |||
{{ name|lc_trad(easyadmin['entity']['name'], 'field') }} | |||
{% else %}#} | |||
{{- label is not same as(false) ? (translation_domain is same as(false) ? label : label|trans(label_translation_parameters, translation_domain))|raw -}} | |||
{#{% endif %}#} | |||
{{- form_errors(form) -}} | |||
</label> | |||
{%- endif -%} | |||
{%- endblock checkbox_radio_label %} |
@@ -66,29 +66,6 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<button type="button" data-bs-toggle="modal" data-bs-target="#niche">Launch modal</button> | |||
<div class="modal" tabindex="-1" role="dialog" id="test22"> | |||
<div class="modal-dialog" role="document"> | |||
<div class="modal-content"> | |||
<div class="modal-header"> | |||
<h5 class="modal-title">Modal title</h5> | |||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |||
<span aria-hidden="true">×</span> | |||
</button> | |||
</div> | |||
<div class="modal-body"> | |||
<p>Modal body text goes here.</p> | |||
</div> | |||
<div class="modal-footer"> | |||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |||
<button type="button" class="btn btn-primary">Save changes</button> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
{% endblock %} | |||
{% block body_javascript %} |