add FilePickerType

This commit is contained in:
Simon Vieille 2021-06-22 15:17:56 +02:00
parent 363108dfac
commit f0cfef5b94
6 changed files with 176 additions and 7 deletions

View File

@ -22,3 +22,4 @@ require('./modules/datepicker.js')()
require('./modules/sortable.js')()
require('./modules/batch.js')()
require('./modules/file-manager.js')()
require('./modules/file-picker.js')()

View File

@ -2,12 +2,12 @@ const $ = require('jquery')
const Vue = require('vue').default
const FileManager = require('../components/file-manager/FileManager').default
const createModal = function (url) {
let container = $('#file-manager-modal-container')
const createModal = function () {
let container = $('#fm-modal')
const body = $('body')
if (!container.length) {
container = $('<div id="file-manager-modal-container" class="modal">')
container = $('<div id="fm-modal" class="modal">')
body.append(container)
}
@ -16,7 +16,7 @@ const createModal = function (url) {
<div class="modal-dialog modal-dialog-large">
<div class="modal-content">
<div class="modal-body">
<div id="file-manager-modal-content">
<div id="fm-modal-content">
</div>
</div>
<div class="modal-footer">
@ -34,14 +34,18 @@ const createModal = function (url) {
const fileManagerBrowser = function (callback) {
const container = createModal()
$('body').on('click', '#file-manager-insert', (e) => {
const clickCallback = (e) => {
callback($(e.target).attr('data-value'), {})
$('#modal-container').modal('hide')
container.modal('hide')
})
$('body').off('click', '#file-manager-insert', clickCallback)
}
$('body').on('click', '#file-manager-insert', clickCallback)
new Vue({
el: '#file-manager-modal-content',
el: '#fm-modal-content',
template: '<FileManager context="tinymce" />',
components: {
FileManager

View File

@ -0,0 +1,71 @@
const $ = require('jquery')
const Vue = require('vue').default
const FileManager = require('../components/file-manager/FileManager').default
const createModal = function () {
let container = $('#fm-modal')
const body = $('body')
if (!container.length) {
container = $('<div id="fm-modal" class="modal">')
body.append(container)
}
container.html(`
<div class="modal-dialog modal-dialog-large">
<div class="modal-content">
<div class="modal-body">
<div id="fm-modal-content">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
`)
$(container).modal('show')
return $(container)
}
const fileManagerBrowser = function (callback) {
const container = createModal()
const clickCallback = (e) => {
callback($(e.target).attr('data-value'), {})
$('#modal-container').modal('hide')
container.modal('hide')
$('body').off('click', '#file-manager-insert', clickCallback)
}
$('body').on('click', '#file-manager-insert', clickCallback)
new Vue({
el: '#fm-modal-content',
template: '<FileManager context="tinymce" />',
components: {
FileManager
}
})
}
module.exports = function () {
$('body').on('click', '.form-filepicker-picker', (e) => {
e.preventDefault()
const picker = $(e.target)
const id = '#' + picker.attr('data-target')
const input = $(id)
fileManagerBrowser((value) => {
value = value.replace(/^\//, '')
picker.parent('.form-filepicker-container').find('input.form-filepicker-picker').val(value)
input.val(value)
})
})
}

View File

@ -0,0 +1,37 @@
<?php
namespace App\Core\Form\FileManager;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\Form\Extension\Core\Type\HiddenType;
class FilePickerType extends AbstractType
{
/**
* {@inheritdoc}
*/
public function buildView(FormView $view, FormInterface $form, array $options)
{
$view->vars['pattern'] = null;
unset($view->vars['attr']['pattern']);
}
/**
* {@inheritdoc}
*/
public function getParent()
{
return TextType::class;
}
/**
* {@inheritdoc}
*/
public function getBlockPrefix()
{
return 'file_picker';
}
}

View File

@ -189,3 +189,4 @@
"Preview": "Aperçu"
"Insert": "Insérer"
"Attributes": "Attributs"
"Choose": "Choisir"

View File

@ -113,6 +113,61 @@
</template>
{% endblock %}
{% block file_picker_widget %}
<div class="form-filepicker">
{% set value = form.vars.data %}
<div class="card">
{% if value %}
{% if value.extension is defined and value.extension in ['jpeg', 'jpg', 'gif', 'png', 'svg'] %}
<div class="card-img-top bg-tiles text-center">
<a href="{{ asset(value.pathname) }}" target="_blank">
<img src="{{ asset(value.pathname) }}" class="img-fluid">
</a>
</div>
{% else %}
{% for extension in ['.jpeg', '.jpg', '.gif', '.png', '.svg'] %}
{% if value ends with extension %}
<div class="card-img-top bg-tiles text-center">
<a href="{{ asset(value) }}" target="_blank">
<img src="{{ asset(value) }}" class="img-fluid">
</a>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
<div class="card-body">
<div class="d-none">
{{- form_widget(form) -}}
</div>
<div class="p-2 text-center">
<span class="form-filepicker-container">
<input class="form-control form-filepicker-picker mb-3" data-target="{{ id }}" readonly type="text" value="{{ value }}">
<span class="btn btn-primary form-filepicker-picker" data-target="{{ id }}">
{{ 'Choose'|trans }}
</span>
</span>
{% if value %}
{% if value.pathname is defined %}
<a class="btn btn-success ml-1" href="{{ asset(value.pathname) }}" target="_blank">
{{ 'Download'|trans }}
</a>
{% else %}
<a class="btn btn-success ml-1" href="{{ asset(value) }}" target="_blank">
{{ 'Download'|trans }}
</a>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
{% block form_row -%}
{%- set widget_attr = {} -%}