backports murph-skeleton
This commit is contained in:
parent
9ee7f9254b
commit
5cf9dcf836
|
@ -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')()
|
||||
|
|
|
@ -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
|
||||
|
|
71
assets/js/admin/modules/file-picker.js
Normal file
71
assets/js/admin/modules/file-picker.js
Normal 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)
|
||||
})
|
||||
})
|
||||
}
|
37
core/Form/FileManager/FilePickerType.php
Normal file
37
core/Form/FileManager/FilePickerType.php
Normal 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';
|
||||
}
|
||||
}
|
|
@ -189,3 +189,4 @@
|
|||
"Preview": "Aperçu"
|
||||
"Insert": "Insérer"
|
||||
"Attributes": "Attributs"
|
||||
"Choose": "Choisir"
|
||||
|
|
|
@ -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 = {} -%}
|
||||
|
||||
|
|
Loading…
Reference in a new issue