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/sortable.js')()
|
||||||
require('./modules/batch.js')()
|
require('./modules/batch.js')()
|
||||||
require('./modules/file-manager.js')()
|
require('./modules/file-manager.js')()
|
||||||
|
require('./modules/file-picker.js')()
|
||||||
|
|
|
@ -2,12 +2,12 @@ const $ = require('jquery')
|
||||||
const Vue = require('vue').default
|
const Vue = require('vue').default
|
||||||
const FileManager = require('../components/file-manager/FileManager').default
|
const FileManager = require('../components/file-manager/FileManager').default
|
||||||
|
|
||||||
const createModal = function (url) {
|
const createModal = function () {
|
||||||
let container = $('#file-manager-modal-container')
|
let container = $('#fm-modal')
|
||||||
const body = $('body')
|
const body = $('body')
|
||||||
|
|
||||||
if (!container.length) {
|
if (!container.length) {
|
||||||
container = $('<div id="file-manager-modal-container" class="modal">')
|
container = $('<div id="fm-modal" class="modal">')
|
||||||
|
|
||||||
body.append(container)
|
body.append(container)
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,7 @@ const createModal = function (url) {
|
||||||
<div class="modal-dialog modal-dialog-large">
|
<div class="modal-dialog modal-dialog-large">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div id="file-manager-modal-content">
|
<div id="fm-modal-content">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
|
@ -34,14 +34,18 @@ const createModal = function (url) {
|
||||||
const fileManagerBrowser = function (callback) {
|
const fileManagerBrowser = function (callback) {
|
||||||
const container = createModal()
|
const container = createModal()
|
||||||
|
|
||||||
$('body').on('click', '#file-manager-insert', (e) => {
|
const clickCallback = (e) => {
|
||||||
callback($(e.target).attr('data-value'), {})
|
callback($(e.target).attr('data-value'), {})
|
||||||
$('#modal-container').modal('hide')
|
$('#modal-container').modal('hide')
|
||||||
container.modal('hide')
|
container.modal('hide')
|
||||||
})
|
|
||||||
|
$('body').off('click', '#file-manager-insert', clickCallback)
|
||||||
|
}
|
||||||
|
|
||||||
|
$('body').on('click', '#file-manager-insert', clickCallback)
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#file-manager-modal-content',
|
el: '#fm-modal-content',
|
||||||
template: '<FileManager context="tinymce" />',
|
template: '<FileManager context="tinymce" />',
|
||||||
components: {
|
components: {
|
||||||
FileManager
|
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"
|
"Preview": "Aperçu"
|
||||||
"Insert": "Insérer"
|
"Insert": "Insérer"
|
||||||
"Attributes": "Attributs"
|
"Attributes": "Attributs"
|
||||||
|
"Choose": "Choisir"
|
||||||
|
|
|
@ -113,6 +113,61 @@
|
||||||
</template>
|
</template>
|
||||||
{% endblock %}
|
{% 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 -%}
|
{% block form_row -%}
|
||||||
{%- set widget_attr = {} -%}
|
{%- set widget_attr = {} -%}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue